TreeWalker#

TreeWalker.nextNode()#

Metoda nextNode() zwraca węzeł następujący 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:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
var next_node = treeWalker.nextNode();

gdzie poszczególne człony oznaczają:

Algorytm wywołania metody nextNode() nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:

  1. Niech node będzie wartością wskazywaną przez atrybut currentNode w obiekcie kontekstu.
  2. Niech result będzie wartością FILTER_ACCEPT.

  3. Wykonaj poniższe podkroki:

    1. Dopóki (while) result nie ma wartości FILTER_REJECT i node ma dziecko, to uruchom wewnętrzne podkroki:

      1. Ustaw node na swoje pierwsze dziecko.
      2. Przefiltruj node i ustaw result na zwróconą wartość.
      3. Jeśli result ma wartość FILTER_ACCEPT, to ustaw atrybut currentNode w obiekcie kontekstu na node i zwróć node.

    2. Jeśli istnieje węzeł, który jest następnikiem dla node i nie jest następnikiem dla korzenia, to ustaw node na pierwszy taki węzeł.

      W przeciwnym razie zwróć wartość null.

    3. Przefiltruj node i ustaw result na zwróconą wartość.
    4. Jeśli result ma wartość FILTER_ACCEPT, to ustaw atrybut currentNode na node i zwróć node.
    5. Uruchom te podkroki ponownie.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!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#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
interface TreeWalker {
	Node? nextNode();
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

TreeWalker (H1) TreeWalker.nextNode() (H2) Opis działania (H3) Składnia Web IDL (H3) Specyfikacje i inne materiały (H3)