TreeWalker#
TreeWalker.nextSibling()#
Metoda nextSibling() zwraca brata następującego względem bieżącego węzła w danym przemierzaczu drzewa, który spełnia kryteria filtracji. Jeśli nie będzie takiego węzła to zwrócona zostanie wartość null.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var next_sibling = treeWalker.nextSibling();gdzie poszczególne człony oznaczają:
- next_sibling - brat następujący lub wartość
null. - treeWalker - przemierzacz drzewa będący obiektem kontekstu.
Algorytm wywołania metody nextSibling() nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć wynik przejścia przez braci z typem następujący.
Należy mieć na uwadze, że brat następujący względem bieżącego węzła nie musi być identyczny z wartością zwracaną przez właściwość Node.nextSibling. Wszystko będzie zależne od sposobu filtracji węzłów.
Wywołanie metody nextSibling() od razu po utworzeniu przemierzacza drzewa nie wywoła żadnego efektu (tj. zawsze zwróci wartość null). Dzieje się tak dlatego, że bieżącym węzłem najpierw zostaje korzeń, który jest ogranicznikiem, dlatego nie można go opuścić w standardowy sposób. Teoretyczny opis tego procesu omówiłem w podstawach przemierzacza drzewa.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function move(direct){
var info1 = document.getElementById("info1");
var info2 = document.getElementById("info2");
var root = document.getElementById("box");
var dir = "";
var node = "";
var nodeText = "";
if (typeof walker != "object"){
walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
}
if (info1.textContent == ""){
info1.innerHTML = "root: " + walker.root
+ "<br>" + "currentNode: " + walker.currentNode
+ "<br>" + "currentNode.textContent: " + walker.currentNode.textContent;
}
if (direct == "parentNode"){
node = walker.parentNode();
dir = "parentNode()";
}
if (direct == "firstChild"){
node = walker.firstChild();
dir = "firstChild()";
}
if (direct == "lastChild"){
node = walker.lastChild();
dir = "lastChild()";
}
if (direct == "nextSibling"){
node = walker.nextSibling();
dir = "nextSibling()";
}
if (direct == "previousSibling"){
node = walker.previousSibling();
dir = "previousSibling()";
}
if (direct == "nextNode"){
node = walker.nextNode();
dir = "nextNode()";
}
if (direct == "previousNode"){
node = walker.previousNode();
dir = "previousNode()";
}
if (node){
nodeText = node.textContent;
}
var result = "currentNode: " + walker.currentNode
+ "<br>" + "currentNode.textContent: " + walker.currentNode.textContent
+ "<br><br>" + dir + ": " + node
+ "<br>" + dir + ".textContent: " + nodeText;
info2.innerHTML = result;
}
</script>
</head>
<body>
<div id="box">
<p>Pierwszy <strong>akapit</strong> w <em>kontenerze</em> DIV.</p>
<P>Drugi <strong>akapit</strong> w <em>kontenerze</em> DIV.</p>
<P>Trzeci <strong>akapit</strong> w <em>kontenerze</em> DIV.</P>
</div>
<p>Kliknij konkretny przycisk by przemierzać kolejne węzły w kontenerze DIV.</p>
<input type="button" value="parentNode()" onclick="move('parentNode')">
<input type="button" value="firstChild()" onclick="move('firstChild')">
<input type="button" value="lastChild()" onclick="move('lastChild')">
<input type="button" value="nextSibling()" onclick="move('nextSibling')">
<input type="button" value="previousSibling()" onclick="move('previousSibling')">
<input type="button" value="nextNode()" onclick="move('nextNode')">
<input type="button" value="previousNode()" onclick="move('previousNode')">
<p style="color: blue;">Szczegółowe informacje dla utworzonego przemierzacza drzewa:</p>
<p id="info1"></p>
<p style="color: blue;">Szczegółowe informacje dla kolejnych przejść przemierzacza drzewa:</p>
<p id="info2"></p>
</body>
</html>Składnia Web IDL#
interface TreeWalker { Node? nextSibling(); }