DOM
Traversal

Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP React SVG
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