Πώς να φιλτράρετε και να τραβήξετε το DOM Tree με JavaScript

Γνωρίζατε ότι υπάρχει ένα API JavaScript του οποίου η μόνη αποστολή είναι να φιλτράρετε και επαναλάβετε μέσω των κόμβων θέλουμε από ένα δέντρο DOM; Στην πραγματικότητα, όχι ένα, αλλά υπάρχουν δύο τέτοια API: NodeIterator και TreeWalker. Είναι αρκετά όμοια μεταξύ τους, με κάποιες χρήσιμες διαφορές. Και οι δύο μπορούν επιστρέψτε μια λίστα με κόμβους που υπάρχουν κάτω από έναν δεδομένο ριζικό κόμβο ενώ συμμορφώνονται με οποιοσδήποτε προκαθορισμένος και / ή προσαρμοσμένος κανόνες φίλτρου εφαρμοστεί σε αυτά.

Τα προκαθορισμένα φίλτρα που είναι διαθέσιμα στα API μπορούν να μας βοηθήσουν στοχεύουν διάφορα είδη κόμβων όπως κόμβοι κειμένου ή κόμβοι στοιχείων και προσαρμοσμένα φίλτρα (που προσθέσαμε από εμάς) φιλτράρετε περαιτέρω το μάτσο, για παράδειγμα αναζητώντας κόμβους με συγκεκριμένα περιεχόμενα. Η επιστρεφόμενη λίστα των κόμβων είναι επαναληπτικό, δηλαδή μπορούν να είναι βρόχο, και μπορούμε να συνεργαστούμε με όλους τους μεμονωμένους κόμβους της λίστας.

Πώς να χρησιμοποιήσετε το NodeIterator API

ΕΝΑ NodeIterator το αντικείμενο μπορεί να δημιουργηθεί χρησιμοποιώντας το createNodeIterator () μέθοδος του έγγραφο διεπαφή. Αυτή η μέθοδος παίρνει τρία επιχειρήματα. Το πρώτο είναι απαραίτητο. το”s κόμβος ρίζας που περιέχει όλους τους κόμβους που θέλουμε να φιλτράρουμε.

Το δεύτερο και το τρίτο επιχείρημα είναι προαιρετικός. Είναι οι προκαθορισμένα και προσαρμοσμένα φίλτρα, αντίστοιχα. Τα προκαθορισμένα φίλτρα είναι διαθέσιμα για χρήση ως σταθερές του NodeFilter αντικείμενο.

Για παράδειγμα, αν το NodeFilter.SHOW_TEXT η σταθερά προστίθεται ως δεύτερη παράμετρος θα επιστρέψει ένα iterator για ένα λίστα όλων των κόμβων κειμένου κάτω από τον κόμβο ρίζας. NodeFilter.SHOW_ELEMENT θα επιστρέψει μόνο οι κόμβοι των στοιχείων. Δείτε μια πλήρη λίστα με όλες τις διαθέσιμες σταθερές.

Το τρίτο όρισμα (το προσαρμοσμένο φίλτρο) είναι a που εφαρμόζει το φίλτρο.

Εδώ είναι ένα παράδειγμα αποσπάσματος κώδικα:

        
τίτλος
 
 αυτό είναι το περιτύλιγμα σελίδας 
γεια σας
 
Πώς είσαι?
 
 κείμενο κάποια σύνδεση    

Υποθέτοντας ότι θέλουμε εξαγάγετε το περιεχόμενο όλων των κόμβων κειμένου που βρίσκονται μέσα στο #περικάλυμμα div, αυτό είναι το πώς θα το χρησιμοποιήσουμε NodeIterator:

 var div = document.querySelector ('# περιτύλιγμα'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); ενώ (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * κονσόλα εξόδου [Log] αυτό είναι το περιτύλιγμα σελίδας [Log] Hello [Σύνδεση] [Είσοδος] Πώς είσαι; [Καταγραφή] * / 

ο nextNode () μέθοδος του NodeIterator API επιστρέφει τον επόμενο κόμβο στη λίστα των επαναληπτών κόμβων κειμένου. Όταν το χρησιμοποιούμε σε ένα ενώ για να αποκτήσετε πρόσβαση σε κάθε κόμβο της λίστας, καταγράφουμε τα κομμένα περιεχόμενα κάθε κόμβου κειμένου στην κονσόλα. ο referenceNode Ιδιοκτησία του NodeIterator επιστρέφει τον κόμβο στον οποίο είναι συνδεδεμένος ο iterator.

Όπως μπορείτε να δείτε στην έξοδο, υπάρχουν μερικοί κόμβοι κειμένου με κενά κενά μόνο για το περιεχόμενό τους. Μπορούμε αποφύγετε την εμφάνιση αυτών των κενών περιεχομένων χρησιμοποιώντας ένα προσαρμοσμένο φίλτρο:

 var div = document.querySelector ('# περιτύλιγμα'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, συνάρτηση (κόμβος) επιστροφή (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT?); ενώ (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * κονσόλα εξόδου [Log] αυτή είναι η περιτύλιξη σελίδας [Log] Hello [Log] Πώς είσαι; * / 

Η προσαρμοσμένη λειτουργία φίλτρου επιστρέφει τη σταθερά NodeFilter.FILTER_ACCEPTαν ο κόμβος κειμένου δεν είναι κενός, η οποία οδηγεί στο να συμπεριληφθεί αυτός ο κόμβος στον κατάλογο των κόμβων που το iterator θα επαναλάβει. Αντίθετα, το NodeFilter.FILTER_REJECT η σταθερά επιστρέφεται για να γίνει αποκλείστε τους κεντρικούς κόμβους κειμένου από την επαναληπτική λίστα κόμβων.

Πώς να χρησιμοποιήσετε το TreeWalker API

Όπως ανέφερα προηγουμένως, το NodeIterator και TreeWalker APIs είναι παρόμοια μεταξύ τους.

TreeWalker μπορεί να δημιουργηθεί χρησιμοποιώντας το createTreeWalker () μέθοδος του έγγραφο διεπαφή. Αυτή η μέθοδος, ακριβώς όπως createNodeFilter (), παίρνει τρία επιχειρήματα: τον κόμβο ρίζας, ένα προκαθορισμένο φίλτρο και ένα προσαρμοσμένο φίλτρο.

Αν εμείς Χρησιμοποιήστε το TreeWalker API αντί για NodeIterator το προηγούμενο απόσπασμα κώδικα μοιάζει με το ακόλουθο:

 var div = document.querySelector ('# περιτύλιγμα'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, λειτουργία (κόμβος) επιστροφή (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT?); ενώ (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * output [Log] αυτό είναι το wrapper σελίδας [Log] Hello [Log] Πώς είσαι; * / 

Αντί referenceNode, ο currentNode ιδιοκτησία του TreeWalker Το API χρησιμοποιείται για αποκτήστε πρόσβαση στον κόμβο στον οποίο είναι προσαρτημένος ο iterator. Επιπρόσθετα με nextNode () μέθοδος, Treewalker έχει άλλες χρήσιμες μεθόδους. ο previousNode () (που υπάρχουν επίσης στο NodeIterator) επιστρέφει τον προηγούμενο κόμβο του κόμβου στον οποίο είναι αγκυροβολημένο το iterator.

Παρόμοια λειτουργικότητα εκτελείται από το parentNode (), πρώτο παιδί(), τελευταίο παιδί(), previousSibling (), και nextSibling () μεθόδων. Αυτές οι μέθοδοι είναι διαθέσιμη μόνο στο TreeWalker API.

Ακολουθεί ένα παράδειγμα κώδικα εξάγει το τελευταίο παιδί του κόμβου ο iterator είναι αγκυρωμένος σε:

 var div = document.querySelector ('# περιτύλιγμα'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * εξόδου [Καταγραφή] 
Πώς είσαι?
 * / 

Ποιο API θα επιλέξετε

Επιλέξτε το NodeIterator API, όταν εσύ χρειάζονται απλώς έναν απλό iterator να φιλτράρετε και να βγείτε από τους επιλεγμένους κόμβους. Και, επιλέξτε το TreeWalker API, όταν εσύ πρέπει να έχουν πρόσβαση στην οικογένεια φιλτραρισμένων κόμβων, όπως τα άμεσα αδέλφια τους.