DOM
Traversal
Szukaj…
Chodzenie po drzewie
TreeWalker to interfejs podobny do generatora, który sprawia, że rekurencyjne filtrowanie węzłów w drzewie DOM jest łatwe i wydajne.
Poniższy kod łączy wartość wszystkich węzłów Text na stronie i wypisuje wynik.
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
Funkcja .createTreeWalker ma sygnaturę
createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)
| Parametr | Detale |
|---|---|
| korzeń | Węzeł „główny”, który jest poddrzewem, powinien zostać pokonany |
| whatToShow | Opcjonalne, niepodpisane długie określenie, jakie typy węzłów mają być wyświetlane. Aby uzyskać więcej informacji, zobacz NodeFilter. |
| filtr | Opcjonalne: Obiekt z metodą acceptNode w celu ustalenia, czy węzeł po przejściu testu whatToShow powinien być brany pod uwagę |
| entityReferenceExpansion | Nieaktualne i opcjonalne, Jest to logiczna wartość logiczna wskazująca, czy podczas odrzucania elementu EntityReference całe jego poddrzewa musi zostać odrzucone w tym samym czasie. |
Iterowanie po węzłach
Interfejs NodeIterator zapewnia metody iteracji nad węzłami w drzewie DOM.
Biorąc pod uwagę dokument taki jak ten:
<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>
Można sobie wyobrazić iterator, aby uzyskać elementy <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);
}
Przykład zaadaptowany z przykładu dostarczonego przez Mozilla Contributors z document.createNodeIterator() w Mozilla Developer Network, na licencji CC-by-SA 2.5 .
Spowoduje to zalogowanie:
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
Zauważ, że jest to podobne do iterface TreeWalker , ale zapewnia tylko funkcje nextNode() i previousNode() .
Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow
