Hogyan szűrjük és átmásoljuk a DOM-fát JavaScript-el

Tudtad, hogy van egy JavaScript API, amelynek egyetlen feladata szűrje ki és iterálja át a csomópontokon akarunk egy DOM fáról? Valójában nem egy, hanem két ilyen API létezik: NodeIterator és TreeWalker. Nagyon hasonlítanak egymásra, néhány hasznos különbséggel. Mindkettő képes adja meg a csomópontok listáját amelyek egy adott gyökér csomópont alatt vannak, miközben megfelelnek bármely előre meghatározott és / vagy egyedi szűrési szabály alkalmazzák őket.

Az API-kban elérhető előre meghatározott szűrők segíthetnek nekünk célozza meg a különböző csomópontokat például szöveges csomópontok vagy elem csomópontok és egyéni szűrők (amelyeket hozzáadunk) tovább szűrje a csomót, például olyan konkrét tartalmú csomópontok keresésével. A csomópontok visszaadott listája iterable, vagyis lehetnek áthúzott, és a listában szereplő egyes csomópontokkal dolgozhatunk.

Hogyan kell használni a NodeIterator API

A NodeIterator az objektum a createNodeIterator () módszer dokumentum felület. Ez a módszer három érvet vesz fel. Az első szükséges; azt”s a gyökércsomópont melyik az összes csomópontot szeretné kiszűrni.

A második és a harmadik érv választható. Ők a előre meghatározott és egyedi szűrők, illetőleg. Az előre meghatározott szűrők használhatóak a NodeFilter tárgy.

Például, ha a NodeFilter.SHOW_TEXT konstans értéket adunk hozzá, mint második paramétert, majd egy iterátort ad vissza az a a gyökér csomópont alatt található összes szövegcsomópont listája. NodeFilter.SHOW_ELEMENT vissza fog térni csak az elem csomópontjai. Lásd a teljes listát minden rendelkezésre álló állandót.

A harmadik argumentum (az egyéni szűrő) a a szűrőt végrehajtó funkció.

Itt van egy például kódrészlet:

        
cím
 
 ez az oldalcsomagoló 
Szia
 
Hogy vagy?
 
 txt valamilyen linket    

Feltételezve, hogy szeretnénk kivonja az összes szöveges csomópont tartalmát, amelyek a #csomagolás div, ez az, hogy hogyan használjuk fel NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); míg (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konzolkimenet [Napló] ez az oldalfóliázó [Log] Hello [Log] [Log] Hogyan vagy? [Napló] * / 

A nextNode () módszer NodeIterator API visszaadja a következő csomópontot az iterable text csomópontok listájában. Amikor azt a míg A lista minden egyes csomópontjának eléréséhez hurok, minden szövegcsomópont vágott tartalmát naplózza a konzolba. A referenceNode tulajdona NodeIterator visszaadja a csomópontot, amelyre az iterátor jelenleg csatlakozik.

Amint láthatjuk a kimeneten, vannak olyan szövegcsomók, amelyek tartalma üres. Tudunk ne jelenjenek meg az üres tartalmak egyéni szűrő használatával:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, függvény (csomópont) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); míg (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konzolkimenet [Napló] ez az oldalfóliázó [Log] Hello [Log] Hogyan vagy? * / 

Az egyéni szűrő funkció visszaadja az állandó értéket NodeFilter.FILTER_ACCEPTha a szöveg csomópont nem üres, ami a csomópontnak a csomópontok listájába való felvételéhez vezet, az iterátor ismételten ismétlődik. Ellentétben a NodeFilter.FILTER_REJECT az állandó értéket visszaadja annak érdekében, hogy kizárja az üres szöveges csomópontokat a csomópontok ismételt listájából.

Hogyan kell használni a TreeWalker API

Mint korábban említettem, a NodeIterator és TreeWalker API-k hasonlóak.

TreeWalker létrehozható a createTreeWalker () módszer dokumentum felület. Ez a módszer, akárcsak createNodeFilter (), három érvet vesz fel: a gyökér csomópont, egy előre meghatározott szűrő és egy egyéni szűrő.

Ha mi használja a TreeWalker API helyett NodeIterator az előző kódrészlet a következőképpen néz ki:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, függvény (csomópont) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); míg (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * kimenet [Log] ez az oldalcsomagoló [Log] Hello [Log] Hogyan vagy? * / 

Ahelyett referenceNode, a currentNode a TreeWalker Az API-t használják elérje azt a csomópontot, amelyhez az iterátor jelenleg csatlakozik. Amellett, hogy a nextNode () eljárás, Treewalker más hasznos módszerekkel rendelkezik. A previousNode () módszert (amely szintén jelen van NodeIterator) visszaadja az előző csomópontot a csomópontból az iterátor jelenleg rögzítve van.

Hasonló funkciókat hajt végre a parentNode (), első gyerek(), utolsó gyerek(), previousSibling (), és nextSibling () mód. Ezek a módszerek csak a TreeWalker API.

Itt van egy kódpéldány a csomópont utolsó gyermekét adja ki az iterátor rögzítve van:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * kimenet [Napló] 
Hogy vagy?
 * / 

Melyik API-t választani

Válaszd a NodeIterator API, amikor csak egy egyszerű iterátorra van szükség a kiválasztott csomópontok szűréséhez és hurokhoz. És vedd fel TreeWalker API, amikor hozzáférnie kell a szűrt csomópontok családjához, például a közvetlen testvéreiket.