Dokument: Methode createTreeWalker()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die Document.createTreeWalker()
-Erstellermethode gibt ein neu erstelltes TreeWalker
-Objekt zurück.
Syntax
createTreeWalker(root)
createTreeWalker(root, whatToShow)
createTreeWalker(root, whatToShow, filter)
Parameter
root
-
Ein
Node
, der die Wurzel desTreeWalker
-Objekts darstellt, was der anfängliche Wert vonTreeWalker.currentNode
ist. whatToShow
Optional-
Ein
unsigned long
, der eine Bitmaske darstellt, die durch Kombination der Konstanten-Eigenschaften vonNodeFilter
erstellt wurde. Es ist eine bequeme Möglichkeit zur Filterung bestimmter Knotentypen. Standardmäßig ist es0xFFFFFFFF
, was der KonstanteNodeFilter.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
Veraltet0x20
Veraltet, nicht mehr wirksam. NodeFilter.SHOW_ENTITY_REFERENCE
Veraltet0x10
Veraltet, nicht mehr wirksam. NodeFilter.SHOW_NOTATION
Veraltet0x800
Veraltet, nicht mehr wirksam. NodeFilter.SHOW_PROCESSING_INSTRUCTION
0x40
Zeigt ProcessingInstruction
-Knoten an.NodeFilter.SHOW_TEXT
0x4
Zeigt Text
-Knoten an.Hinweis: Da der Elternknoten eines
Attr
-Knotens immernull
ist, wirdTreeWalker.nextNode()
undTreeWalker.previousNode()
niemals einenAttr
-Knoten zurückgeben. UmAttr
-Knoten zu durchlaufen, verwenden Sie stattdessenElement.attributes
. filter
Optional-
Eine Callback-Funktion oder ein Objekt mit einer
acceptNode()
-Methode, dieNodeFilter.FILTER_ACCEPT
,NodeFilter.FILTER_REJECT
oderNodeFilter.FILTER_SKIP
zurückgibt. Die Funktion oder Methode wird für jeden Knoten im Unterbaum mit Wurzel beiroot
aufgerufen, welcher als eingeschlossen vomwhatToShow
-Flag akzeptiert wird, um zu bestimmen, ob er in die Liste der iterierbaren Knoten aufgenommen werden soll:- Wenn der Rückgabewert
NodeFilter.FILTER_ACCEPT
ist, wird dieser Knoten aufgenommen. - Wenn der Rückgabewert
NodeFilter.FILTER_REJECT
ist, wird kein Knoten im Unterbaum mit Wurzel bei diesem Knoten aufgenommen. - Wenn der Rückgabewert
NodeFilter.FILTER_SKIP
ist, wird dieser Knoten nicht aufgenommen.
- Wenn der Rückgabewert
Rückgabewert
Ein neues TreeWalker
-Objekt.
Beispiele
Verwendung von whatToShow
Dieses Beispiel verwendet whatToShow
, um Textinhalte in Großbuchstaben umzuwandeln. Beachten Sie, dass auch die Textknoten der Nachkommen des #root
-Elements 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 escapen. Für jeden Textknoten wird sein Inhalt mit encodeURI()
escaped, wenn er ein Nachkomme eines .escape
-Elements, aber nicht eines .no-escape
-Elements ist.
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, " "));
}
}
}
Ergebnis
Spezifikationen
Specification |
---|
DOM Standard # dom-document-createtreewalker |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
TreeWalker
: Verwandte Schnittstelle