Как да филтрираме и прелистваме DOM Tree с JavaScript

Знаете ли, че има JavaScript API, чиято единствена мисия е да филтрирайте и повторете през възлите искаме от дърво DOM? Всъщност не един, а два такива API: NodeIterator и TreeWalker. Те са доста сходни помежду си, с някои полезни различия. И двете могат връщане на списък с възли които се намират под даден корен възел, докато се спазват всички предварително дефинирани и / или собствени правила за филтриране прилага към тях.

Предварително определените филтри, налични в API, могат да ни помогнат насочете различни видове възли като текстови възли или възли на елементи и персонализирани филтри (добавени от нас) могат допълнително филтриране на китката, например чрез търсене на възли със специфично съдържание. Върнатият списък от възли са iterable, те могат да бъдат преметнат, и можем да работим с всички отделни възли в списъка.

Как да използвате NodeIterator API

А NodeIterator обектът може да бъде създаден с помощта на createNodeIterator () метод на документ интерфейс. Този метод взема три аргумента. Първият е задължителен; то”s the root node който държи всички възли, които искаме да филтрираме.

Вторият и третият аргумент са по избор. Те са предварително дефинирани и персонализирани филтри, съответно. Предварително зададените филтри са достъпни за използване като константи на NodeFilter обект.

Например, ако NodeFilter.SHOW_TEXT като втора стойност се добавя константа, която ще върне итератор за a списък на всички текстови възли под коренния възел. NodeFilter.SHOW_ELEMENT Ще се върне само възлите на елементите. Вижте пълен списък на всички налични константи.

Третият аргумент (потребителският филтър) е a функция, която изпълнява филтъра.

Ето едно примерен кодов фрагмент:

        
заглавие
 
 това е опаковката на страницата 
Здравейте
 
Как си?
 
 текст някаква връзка    

Ако приемем, че искаме извлечете съдържанието на всички текстови възли, които са вътре в. \ t #wrapper Разделение, Ето как ние го използваме NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * изход на конзолата [Log] това е страницата обвивка [Log] Здравейте [Log] [Log] Как сте? [Log] * / 

Най- nextNode () метод на NodeIterator API връща следващия възел в списъка с повторяеми текстови възли. Когато го използваме в a докато цикъл за достъп до всеки възел в списъка, регистрираме подрязаното съдържание на всеки текстов възел в конзолата. Най- referenceNode собственост на NodeIterator връща възела, към който в момента е прикачен итераторът.

Както можете да видите в изхода, има някои текстови възли с празни пространства за тяхното съдържание. Ние можем избягвайте да показвате тези празни съдържания, като използвате потребителски филтър:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, функция (възел) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * конзолна продукция [Log] това е страницата обвивка [Log] Здравейте [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, функция (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * изход [Log] това е страницата обвивка [Log] Здравейте [Log] Как сте? * / 

Вместо referenceNode, на currentNode собственост на TreeWalker API е използван достъп до възела, към който в момента е прикачен итераторът. В допълнение към nextNode () метод, Treewalker има и други полезни методи. Най- previousNode () метод (също присъства в NodeIterator) връща предишния възел на възела, към който итераторът в момента е свързан.

Подобна функционалност се извършва от parentNode (), първо дете(), последно дете(), previousSibling (), и nextSibling () методи. Тези методи са налице само в TreeWalker API.

Ето пример за код извежда последното дете на възела итераторът е закотвен на:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * изход [Log] 
Как си?
 * / 

Кой API да изберете

Избери NodeIterator API, когато трябва просто прост итератор за филтриране и преливане през избраните възли. И вземете TreeWalker API, когато трябва да имате достъп до семейството на филтрираните възли, като техните непосредствени братя и сестри.