วิธีกรองและสำรวจทรี DOM ด้วย JavaScript

คุณรู้หรือไม่ว่ามี API ของ JavaScript ที่มีพันธกิจเพียงอย่างเดียว กรองและวนซ้ำผ่านโหนดต่างๆ เราต้องการจากต้นไม้ DOM หรือไม่? ในความเป็นจริงไม่ใช่หนึ่ง แต่มีสอง API ดังกล่าว: NodeIterator และ TreeWalker. พวกมันค่อนข้างคล้ายกันและมีความแตกต่างที่มีประโยชน์ ทั้งสองสามารถ ส่งคืนรายการของโหนด ที่อยู่ภายใต้รูทโหนดที่กำหนดในขณะที่ปฏิบัติตาม กฎตัวกรองที่กำหนดไว้ล่วงหน้าและ / หรือกำหนดเองใด ๆ นำไปใช้กับพวกเขา.

ตัวกรองที่กำหนดไว้ล่วงหน้าที่มีอยู่ใน API สามารถช่วยเราได้ กำหนดเป้าหมายประเภทต่าง ๆ ของโหนด เช่นโหนดข้อความหรือองค์ประกอบโหนดและตัวกรองที่กำหนดเอง (เพิ่มโดยเรา) กรองพวงเพิ่มเติม, เช่นโดยค้นหาโหนดที่มีเนื้อหาเฉพาะ รายการที่ส่งคืนของโหนดคือ iterable, เช่นพวกเขาสามารถ วนผ่าน, และเราสามารถทำงานกับทุกโหนดในรายการ.

วิธีใช้ NodeIterator API

NodeIterator สามารถสร้างวัตถุโดยใช้ createNodeIterator () วิธีการของ เอกสาร อินเตอร์เฟซ. วิธีนี้ ใช้เวลาสามข้อโต้แย้ง. คนแรกจะต้อง; มัน”s โหนดรูท ที่เก็บโหนดทั้งหมดที่เราต้องการกรอง.

อาร์กิวเมนต์ที่สองและสามคือ ไม่จำเป็น. พวกเขาคือ ตัวกรองที่กำหนดไว้ล่วงหน้าและกำหนดเอง, ตามลำดับ ตัวกรองที่กำหนดไว้ล่วงหน้ามีให้สำหรับใช้เป็น ค่าคงที่ของ NodeFilter วัตถุ.

ตัวอย่างเช่นถ้า NodeFilter.SHOW_TEXT ค่าคงที่จะถูกเพิ่มเป็นพารามิเตอร์ตัวที่สองซึ่งจะส่งคืนตัววนซ้ำสำหรับ รายการโหนดข้อความทั้งหมดภายใต้รูทโหนด. NodeFilter.SHOW_ELEMENT จะกลับมา เฉพาะโหนดองค์ประกอบ. ดูรายการทั้งหมดของ ค่าคงที่ที่มีอยู่ทั้งหมด.

อาร์กิวเมนต์ที่สาม (ตัวกรองแบบกำหนดเอง) คือ ฟังก์ชั่นที่ใช้ตัวกรอง.

นี่คือ ตัวอย่างโค้ด:

        
หัวข้อ
 
 นี่คือกระดาษห่อหน้า 
สวัสดี
 
คุณเป็นอย่างไร?
 
 txt ลิงก์บางอัน    

สมมติว่าเราต้องการ แยกเนื้อหาของโหนดข้อความทั้งหมดที่อยู่ภายใน #wrapper div, นี่คือวิธีที่เราใช้ NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); ในขณะที่ (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * console output [Log] นี่คือ wrapper ของหน้า [Log] สวัสดี [Log] [Log] สบายดีมั้ย [บันทึก] * / 

nextNode () วิธีการของ NodeIterator API ส่งคืนโหนดถัดไปในรายการของโหนดข้อความที่ทำซ้ำได้. เมื่อเราใช้มันใน ในขณะที่ วนรอบเพื่อเข้าถึงแต่ละโหนดในรายการเราบันทึกเนื้อหาที่ถูกตัดของโหนดข้อความทุกอันในคอนโซล referenceNode ทรัพย์สินของ NodeIterator ส่งคืนโหนดที่ตัววนซ้ำติดอยู่ในปัจจุบัน.

ดังที่คุณเห็นในผลลัพธ์มีโหนดข้อความบางส่วนที่มีเพียงช่องว่างสำหรับเนื้อหา เราทำได้ หลีกเลี่ยงการแสดงเนื้อหาที่ว่างเปล่าเหล่านี้โดยใช้ตัวกรองที่กำหนดเอง:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, ฟังก์ชั่น (โหนด) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT:; ในขณะที่ (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * console output [Log] นี่คือ wrapper ของหน้า [Log] Hello [Log] สบายดีไหม? * / 

ฟังก์ชั่นตัวกรองที่กำหนดเอง ส่งคืนค่าคงที่ NodeFilter.FILTER_ACCEPTถ้าโหนดข้อความไม่ว่างเปล่า, ซึ่งนำไปสู่การรวมโหนดนั้นในรายการโหนดตัววนซ้ำจะวนซ้ำ ตรงกันข้าม NodeFilter.FILTER_REJECT คงที่จะถูกส่งกลับเพื่อ ยกเว้นโหนดข้อความเปล่า จากรายการที่สามารถทำซ้ำได้ของโหนด.

วิธีใช้ TreeWalker API

อย่างที่ฉันได้พูดไปก่อนหน้านี้แล้ว NodeIterator และ TreeWalker API คือ คล้ายกัน.

TreeWalker สามารถสร้างโดยใช้ createTreeWalker () วิธีการของ เอกสาร อินเตอร์เฟซ. วิธีนี้เหมือนกัน createNodeFilter (), ใช้เวลาสามข้อโต้แย้ง: โหนดรูทตัวกรองที่กำหนดไว้ล่วงหน้าและตัวกรองแบบกำหนดเอง.

ถ้าเรา ใช้ TreeWalker API แทน NodeIterator ข้อมูลโค้ดก่อนหน้ามีลักษณะดังนี้:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, ฟังก์ชั่น (โหนด) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT:; ในขณะที่ (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * output [Log] นี่คือ wrapper ของหน้า [Log] Hello [Log] สบายดีไหม? * / 

แทน referenceNode, currentNode คุณสมบัติของ TreeWalker API ถูกใช้เพื่อ เข้าถึงโหนดที่มีตัววนซ้ำติดอยู่ในปัจจุบัน. นอกจากนี้แล้ว nextNode () วิธี, Treewalker มีวิธีการที่มีประโยชน์อื่น ๆ previousNode () วิธีการ (ยังมีอยู่ใน NodeIterator) ส่งคืนโหนดก่อนหน้า ของโหนดที่ตัววนซ้ำถูกยึดในปัจจุบัน.

ฟังก์ชั่นที่คล้ายกันจะดำเนินการโดย parentNode (), firstChild (), ลูกคนสุดท้อง(), previousSibling (), และ nextSibling () วิธีการ วิธีการเหล่านี้นั้น ใช้ได้เฉพาะใน TreeWalker API.

นี่คือตัวอย่างรหัสที่ เอาท์พุตลูกคนสุดท้ายของโหนด ตัววนซ้ำถูกยึดกับ:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * เอาท์พุท [บันทึก] 
คุณเป็นอย่างไร?
 * / 

เลือก API ใด

เลือก NodeIterator API เมื่อคุณ ต้องการตัววนซ้ำที่เรียบง่าย เพื่อกรองและวนซ้ำผ่านโหนดที่เลือก และเลือก TreeWalker API เมื่อคุณ จำเป็นต้องเข้าถึงตระกูลของโหนดที่ถูกกรอง, เช่นพี่น้องของพวกเขาทันที.