Cum să filtrați și să traversați DOM Tree cu JavaScript

Știați că există un API JavaScript a cărui singură misiune este de a filtrați și iterați prin noduri dorim de la un copac DOM? De fapt, nu unul, dar există două astfel de API-uri: NodeIterator și TreeWalker. Ele sunt destul de asemănătoare unul cu altul, cu unele diferențe utile. Ambele pot returnați o listă de noduri care sunt prezente sub un nod rădăcină dată în timp ce respectă orice reguli de filtrare predefinite și / sau personalizate aplicată acestora.

Filtrele predefinite disponibile în API-uri ne pot ajuta vizați diferite tipuri de noduri cum ar fi nodurile de text sau nodurile de elemente și filtrele personalizate (adăugate de noi) pot filtrați mai departe buchetul, de exemplu prin căutarea unor noduri cu conținut specific. Lista de noduri returnate este iterable, adică pot fi prins prin, și putem lucra cu toate nodurile individuale din listă.

Cum se utilizează NodeIterator API-ul

A NodeIterator obiect poate fi creat folosind createNodeIterator () metodă a document interfață. Aceasta metoda ia trei argumente. Primul este necesar; aceasta”s rădăcină nod care deține toate nodurile pe care vrem să le filtram.

Al doilea și al treilea argument sunt facultativ. Ei sunt filtre predefinite și personalizate, respectiv. Filtrele predefinite sunt disponibile pentru utilizare ca constantele NodeFilter obiect.

De exemplu, dacă NodeFilter.SHOW_TEXT constanta este adaugata ca al doilea parametru va returna un iterator pentru a lista tuturor nodurilor de text sub nodul rădăcină. NodeFilter.SHOW_ELEMENT va reveni numai nodurile elementului. Vedeți o listă completă cu toate constantele disponibile.

Al treilea argument (filtrul personalizat) este a care implementează filtrul.

Aici este un exemplu fragment de cod:

        
titlu
 
 acesta este ambalajul paginii 
Salut
 
Ce mai faci?
 
 txt unele link-uri    

Presupunând că vrem extrage conținutul tuturor nodurilor de text din interiorul #wrapper div, acesta este modul în care folosim acest lucru NodeIterator:

 var div = document.querySelector ('# wrapper'); varul nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); în timp ce (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * ieșire consola [Log] aceasta este pagina de înfășurare [Log] Buna ziua [Log] [Log] Cum esti? [Buturuga] */ 

nextNode () metodă a NodeIterator API-ul returnează nodul următor în lista de noduri text iterabile. Atunci când îl folosim într-un in timp ce pentru a accesa fiecare nod din listă, logăm conținutul tăiat al fiecărui nod de text în consola. referenceNode proprietatea NodeIterator returnează nodul la care este atașat iteratorul.

După cum puteți vedea în ieșire, există niște noduri de text cu doar spații goale pentru conținutul lor. Noi putem evitați afișarea acestor conținuturi goale utilizând un filtru personalizat:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, functie (nod) retur (node.nodeValue.trim ()! == "))? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); în timp ce (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * ieșire consola [Log] aceasta este pagina de înfășurare [Log] Bună ziua [Log] Cum vă aflați? * / 

Funcția de filtrare personalizată returnează constanta NodeFilter.FILTER_ACCEPTdacă nodul text nu este gol, ceea ce duce la includerea acelui nod în lista de noduri pe care iteratorul o va itera. Contrar, NodeFilter.FILTER_REJECT constantă este returnat pentru a excludeți nodurile de text goale din lista de noduri iterabilă.

Cum se utilizează TreeWalker API-ul

Așa cum am menționat anterior, NodeIterator și TreeWalker API-urile sunt similare unul cu celălalt.

TreeWalker poate fi creat folosind createTreeWalker () metodă a document interfață. Această metodă, la fel ca createNodeFilter (), ia trei argumente: nodul rădăcină, un filtru predefinit și un filtru personalizat.

Dacă noi folosește TreeWalker API în loc de NodeIterator fragmentul anterior de cod arată după cum urmează:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, functie (nod) retur (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); în timp ce (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * ieșire [Log] aceasta este pagina de înfășurare [Log] Bună ziua [Log] Cum te simți? * / 

In loc de referenceNode, currentNode proprietate a TreeWalker API este folosit pentru accesați nodul la care iteratorul este în prezent atașat. În plus față de nextNode () metodă, Treewalker are alte metode utile. previousNode () (prezentă și în NodeIterator) returnează nodul anterior al nodului în care iteratorul este în prezent ancorat.

Funcționalitate similară este efectuată de către parentNode (), primul copil(), ultimul copil(), previousSibling (), și nextSibling () metode. Aceste metode sunt disponibil numai în TreeWalker API-ul.

Iată un exemplu de cod ieși ultimul copil al nodului iteratorul este ancorat la:

 var div = document.querySelector ('# wrapper'); var copacWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * ieșire [Log] 
Ce mai faci?
 * / 

Ce API să alegeți

Alege NodeIterator API, când tu nevoie doar de un iterator simplu pentru a filtra și a trece prin nodurile selectate. Și, alegeți TreeWalker API, când tu trebuie să acceseze familia nodurilor filtrate, cum ar fi frații lor imediat.