DOM
пересечение

Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP React SVG
Поиск…


Прогулки деревьев

TreeWalker - это генератор-подобный интерфейс, который упрощает и эффективно рекурсивно фильтрует узлы в дереве DOM.

Следующий код объединяет значение всех Text узлов на странице и выводит результат. 

let parentNode = document.body;
let treeWalker = document.createTreeWalker(parentNode, NodeFilter.SHOW_TEXT);

let text = "";
while (treeWalker.nextNode())
    text += treeWalker.currentNode.nodeValue;

console.log(text); // all text in the page, concatenated

Функция .createTreeWalker имеет подпись 

createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)
параметр подробности
корень Корневой узел, который имеет поддерево, должен быть перемещен
что показать Необязательный, unsigned long, определяющий, какие типы узлов показывать. Дополнительную информацию см. В разделе NodeFilter.
фильтр Необязательно, объект с методом acceptNode для определения того, следует ли считать узел после прохождения проверки whatToShow
entityReferenceExpansion Устаревший и необязательный, является логическим флагом, указывающим, следует ли одновременно отбрасывать все сущность дерева при отбрасывании EntityReference.

Итерация по узлам

Интерфейс NodeIterator предоставляет методы для итерации по узлам в дереве DOM.

Учитывая такой документ, как этот: 

<html>
<body>
  <section class="main">
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
    </ul>
  </section>
</body>
</html>

Можно представить себе итератор, чтобы получить элементы <li> : 

let root = document.body;
let whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
let filter = (node) => node.nodeName.toLowerCase() === 'li' ? 
  NodeFilter.FILTER_ACCEPT : 
  NodeFilter.FILTER_REJECT;
let iterator = document.createNodeIterator(root, whatToShow, filter);
var node;
while (node = iterator.nextNode()) {
  console.log(node);
}

Пример адаптирован из примера, предоставленного вкладчиками Mozilla из document.createNodeIterator() в сети разработчиков Mozilla, лицензированной под CC-by-SA 2.5 .

Это будет записывать что-то вроде: 

<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>

Обратите внимание, что это похоже на TreeWalker iterface, но предоставляет только функции nextNode() и previousNode() .



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow