Як фільтрувати і перетинати дерево DOM за допомогою JavaScript

Чи знаєте ви, що існує JavaScript API, для якого єдина місія відфільтрувати і перебирати через вузли ми хочемо з дерева DOM? Насправді, не один, а два таких API: NodeIterator і TreeWalker. Вони дуже схожі між собою, з деякими корисними відмінностями. Обидва можуть повернути список вузлів які знаходяться під даним кореневим вузлом під час виконання будь-які попередньо визначені та / або користувацькі правила фільтрації застосовується до них.

Наперед визначені фільтри, доступні в API, допоможуть нам націлювання на різні типи вузлів такі як текстові вузли або вузли елементів, а також спеціальні фільтри (додані нами) можуть далі фільтрують пучок, наприклад, шукаючи вузли з певним вмістом. Повернено список вузлів iterable, вони можуть бути зациклився, і ми можемо працювати з усіма окремими вузлами списку.

Як користуватися NodeIterator API

A NodeIterator Об'єкт може бути створений за допомогою createNodeIterator () Метод документ інтерфейс. Цей метод приймає три аргументи. Перший необхідний; це”s кореневий вузол який утримує всі вузли, які ми хочемо відфільтрувати.

Другий і третій аргументи необов'язково. Вони є попередньо визначені та спеціальні фільтри, відповідно. Наперед визначені фільтри доступні для використання як константи NodeFilter об'єкт.

Наприклад, якщо NodeFilter.SHOW_TEXT константа додається як другий параметр, він поверне ітератор для a список всіх текстових вузлів під кореневим вузлом. NodeFilter.SHOW_ELEMENT повернеться тільки вузли елемента. Переглянути повний список всі доступні константи.

Третій аргумент (користувацький фільтр) - це a функція, що реалізує фільтр.

Ось такий приклад фрагмента коду:

        
назва
 
 це обгортка сторінки 
Здрастуйте
 
Як ти?
 
 txt деякі посилання    

Припускаючи, що ми хочемо витягти вміст всіх текстових вузлів, які знаходяться всередині #wrapper div, таким чином ми використовуємо це 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] Hello [Log] [Log] [Журнал] Як справи? [Журнал] * / 

The nextNode () Метод NodeIterator API повертає наступний вузол у списку повторюваних текстових вузлів. Коли ми використовуємо його в a час цикл для доступу до кожного вузла списку, ми реєструємо обрізаний вміст кожного текстового вузла в консолі. The referenceNode майно NodeIterator повертає вузол, до якого в даний момент приєднаний ітератор.

Як ви можете бачити на виході, є декілька текстових вузлів з порожнім простором для їхнього вмісту. Ми можемо уникати показу порожнього вмісту за допомогою спеціального фільтра:

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

Замість referenceNode, currentNode майно TreeWalker Для цього використовується API отримати доступ до вузла, до якого в даний час приєднаний ітератор. На додаток до nextNode () метод, Treewalker має інші корисні методи. The previousNode () Метод (також присутній в NodeIterator) повертає попередній вузол вузла, до якого в даний час прив'язаний ітератор.

Аналогічна функціональність виконується parentNode (), firstChild (), lastChild (), previousSibling (), і nextSibling () методів. Ці методи є доступні лише для TreeWalker API.

Ось приклад коду виводить останню дочку вузла ітератор прив'язаний до:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * output [Журнал] 
Як ти?
 * / 

Який API вибрати

Виберіть NodeIterator API, коли ви потрібно просто простий ітератор для фільтрації та прокручування вибраних вузлів. І, вибирайте TreeWalker API, коли ви необхідно отримати доступ до сімейства фільтрованих вузлів, такі як їхні найближчі брати і сестри.