Dokument: createTreeWalker()-Methode

Syntax

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

Parameter

root

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

whatToShow Optional

Ein unsigned long, der eine Bitmaske darstellt, die durch Kombinieren der Konstanten-Eigenschaften von NodeFilter erstellt wird. Es ist eine bequeme Möglichkeit zum Filtern bestimmter Knotentypen. Standardmäßig ist es 0xFFFFFFFF, was der Konstante NodeFilter.SHOW_ALL entspricht.

Konstante	Numerischer Wert	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 Veraltet	0x20	Veraltet, nicht mehr wirksam.
NodeFilter.SHOW_ENTITY_REFERENCE Veraltet	0x10	Veraltet, nicht mehr wirksam.
NodeFilter.SHOW_NOTATION Veraltet	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 übergeordnete Element eines Attr-Knotens immer null ist, wird 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 basierend auf root aufgerufen, der durch das whatToShow-Flag als einbezogen akzeptiert wird, um zu bestimmen, ob er in die Liste der iterierbaren Knoten aufgenommen wird oder nicht:

• 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 umzuwandeln. 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 er 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