Документ: метод createTreeWalker()

Метод Document.createTreeWalker() возвращает новый созданный объект TreeWalker.

root

A Node представляющий корень объекта TreeWalker, который является начальным значением TreeWalker.currentNode.

whatToShow Необязательно

A unsigned long представляющий битовую маску, созданную путём объединения постоянных свойств NodeFilter. Это удобный способ фильтрации определённых типов узлов. По умолчанию 0xFFFFFFFF, представляющий постоянную NodeFilter.SHOW_ALL.

Постоянная	Числовое значение	Описание
NodeFilter.SHOW_ALL	0xFFFFFFFF	Отображает все узлы.
NodeFilter.SHOW_ATTRIBUTE	0x2	Отображает узлы Attr.
NodeFilter.SHOW_CDATA_SECTION	0x8	Отображает узлы CDATASection.
NodeFilter.SHOW_COMMENT	0x80	Отображает узлы Comment.
NodeFilter.SHOW_DOCUMENT	0x100	Отображает узлы Document.
NodeFilter.SHOW_DOCUMENT_FRAGMENT	0x400	Отображает узлы DocumentFragment.
NodeFilter.SHOW_DOCUMENT_TYPE	0x200	Отображает узлы DocumentType.
NodeFilter.SHOW_ELEMENT	0x1	Отображает узлы Element.
NodeFilter.SHOW_ENTITY Устаревшее	0x20	Устаревший, больше не используется.
NodeFilter.SHOW_ENTITY_REFERENCE Устаревшее	0x10	Устаревший, больше не используется.
NodeFilter.SHOW_NOTATION Устаревшее	0x800	Устаревший, больше не используется.
NodeFilter.SHOW_PROCESSING_INSTRUCTION	0x40	Отображает узлы ProcessingInstruction.
NodeFilter.SHOW_TEXT	0x4	Отображает узлы Text.

Примечание: Так как родитель любого узла Attr всегда null, TreeWalker.nextNode() и TreeWalker.previousNode() никогда не вернут узел Attr. Для обхода узлов Attr используйте Element.attributes вместо этого.

filter Необязательно

Функция обратного вызова или объект с методом acceptNode(), который возвращает NodeFilter.FILTER_ACCEPT, NodeFilter.FILTER_REJECT, или NodeFilter.FILTER_SKIP. Функция или метод будут вызываться для каждого узла в поддереве, базирующимся на root, который принимается как включённый флагом whatToShow для определения того, следует ли включать его в список перебираемых узлов:

• Если возвращаемое значение NodeFilter.FILTER_ACCEPT, этот узел включается.
• Если возвращаемое значение NodeFilter.FILTER_REJECT, никакой узел в поддереве, базирующемся на этом узле, не включается.
• Если возвращаемое значение NodeFilter.FILTER_SKIP, этот узел не включается.

Новый объект TreeWalker.

В этом примере используется whatToShow для преобразования текстового содержимого в верхний регистр. Обратите внимание, что узлы текста потомков элемента #root также обрабатываются, несмотря на то, что они не являются дочерними узлами элемента #root.

HTML

<div id="root">
  This is a text node.
  <span>And this is a <code>span</code> element.</span>
</div>

CSS

span {
  background-color: aqua;
}

JavaScript

const treeWalker = document.createTreeWalker(
  document.querySelector("#root"),
  NodeFilter.SHOW_TEXT,
);

while (treeWalker.nextNode()) {
  const node = treeWalker.currentNode;
  node.data = node.data.toUpperCase();
}

Результат

В этом примере используется filter для экранирования текстового содержимого. Для любого узла текста его содержимое будет экранироваться с помощью encodeURI(), если он является потомком элемента .escape но не является потомком любого элемента .no-escape.

HTML

<div>
  <div>
    This is not escaped. <span class="escape">But this is escaped.</span>
  </div>
  <div class="escape">This is escaped.</div>
  <div class="no-escape">This is not escaped.</div>
</div>
<hr />
<div class="escape">
  <div>
    This is escaped. <span class="no-escape">But this is not escaped.</span>
  </div>
  <div class="no-escape">This is not escaped.</div>
</div>
<hr />
<div class="no-escape">
  <div>This is not escaped.</div>
  <div class="escape">This is not escaped.</div>
</div>

CSS

.escape {
  border: dashed;
}
.no-escape {
  border: solid;
}

JavaScript

const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  (node) =>
    node.classList.contains("no-escape")
      ? NodeFilter.FILTER_REJECT
      : node.closest(".escape")
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_SKIP,
);

while (treeWalker.nextNode()) {
  for (const node of treeWalker.currentNode.childNodes) {
    if (node.nodeType === Node.TEXT_NODE && /\S/.test(node.data)) {
      // Exclude whitespace-only text nodes
      node.data = encodeURI(node.data.replace(/\s+/g, " "));
    }
  }
}

Результат

• TreeWalker: Связанный интерфейс