Dokumentation: createTreeWalker()-Methode

Syntax

createTreeWalker(root)
createTreeWalker(root, whatToShow)
createTreeWalker(root, whatToShow, filter)

Parameter

root

Ein Node, das die Wurzel des TreeWalker-Objekts darstellt, welche der Anfangswert von TreeWalker.currentNode ist.

whatToShow Optional

Ein unsigned long, das eine Bitmaske repräsentiert, die durch Kombination der Konstanteneigenschaften von NodeFilter erstellt wurde. Es ist eine bequeme Möglichkeit, bestimmte Knotentypen zu filtern. Es verwendet standardmäßig 0xFFFFFFFF, was der Konstante NodeFilter.SHOW_ALL entspricht.

Konstante	Zahlenwert	Beschreibung
NodeFilter.SHOW_ALL	0xFFFFFFFF	Zeigt alle Knoten an.
NodeFilter.SHOW_ATTRIBUTE	0x2	Zeigt Attr-Knoten an.
NodeFilter.SHOW_CDATA_SECTION	0x8	Zeigt CDATASection-Knoten an.
NodeFilter.SHOW_COMMENT	0x80	Zeigt Comment-Knoten an.
NodeFilter.SHOW_DOCUMENT	0x100	Zeigt Document-Knoten an.
NodeFilter.SHOW_DOCUMENT_FRAGMENT	0x400	Zeigt DocumentFragment-Knoten an.
NodeFilter.SHOW_DOCUMENT_TYPE	0x200	Zeigt DocumentType-Knoten an.
NodeFilter.SHOW_ELEMENT	0x1	Zeigt Element-Knoten an.
NodeFilter.SHOW_ENTITY	0x20	Veraltet, nicht mehr wirksam.
NodeFilter.SHOW_ENTITY_REFERENCE	0x10	Veraltet, nicht mehr wirksam.
NodeFilter.SHOW_NOTATION	0x800	Veraltet, nicht mehr wirksam.
NodeFilter.SHOW_PROCESSING_INSTRUCTION	0x40	Zeigt ProcessingInstruction-Knoten an.
NodeFilter.SHOW_TEXT	0x4	Zeigt Text-Knoten an.

Hinweis: Die Konstante NodeFilter.SHOW_ATTRIBUTE ist nur wirksam, wenn die Wurzel ein Attributknoten ist. Da das Elternteil eines Attr-Knotens immer null ist, werden TreeWalker.nextNode() und TreeWalker.previousNode() niemals einen Attr-Knoten zurückgeben. Um Attr-Knoten zu durchlaufen, verwenden Sie stattdessen Element.attributes.

filter Optional

Eine Rückruffunktion oder ein Objekt mit einer acceptNode()-Methode, die NodeFilter.FILTER_ACCEPT, NodeFilter.FILTER_REJECT oder NodeFilter.FILTER_SKIP zurückgibt. Die Funktion oder Methode wird für jeden Knoten im Teilbaum aufgerufen, der an der root-Stelle basiert und durch das whatToShow-Flag als einzuschließend akzeptiert wird, um zu bestimmen, ob er in die Liste der durchlaufbaren Knoten aufgenommen werden soll:

• Wenn der Rückgabewert NodeFilter.FILTER_ACCEPT ist, wird dieser Knoten einbezogen.
• Wenn der Rückgabewert NodeFilter.FILTER_REJECT ist, wird kein Knoten im Teilbaum basierend auf diesem Knoten einbezogen.
• Wenn der Rückgabewert NodeFilter.FILTER_SKIP ist, wird dieser Knoten nicht einbezogen.

Rückgabewert

Ein neues TreeWalker-Objekt.

Beispiele

Verwendung von whatToShow

Dieses Beispiel verwendet whatToShow, um Textinhalte in Großbuchstaben zu verwandeln. Beachten Sie, dass die Textknoten der Nachkommen des #root-Elements ebenfalls durchlaufen werden, obwohl sie keine Kindknoten des #root-Elements sind.

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();
}

Ergebnis

Verwendung von filter

Dieses Beispiel verwendet filter, um Textinhalte zu maskieren. Für jeden Textknoten werden seine Inhalte mit encodeURI() maskiert, wenn es ein Nachkomme eines .escape-Elements ist, aber nicht eines .no-escape-Elements.

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

div {
  margin: 0.25em 0;
  padding: 0.25em;
}
span {
  display: inline-block;
}

.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, " "));
    }
  }
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• TreeWalker: Verwandte Schnittstelle