TreeWalker#

TreeWalker.firstChild()#

Metoda firstChild() zwraca pierwsze dziecko względem bieżącego węzła w danym przemierzaczu drzewa, które 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 first_child = treeWalker.firstChild();

gdzie poszczególne człony oznaczają:

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

  1. Zwróć wynik przejścia przez dzieci z typem pierwszy.

Należy mieć na uwadze, że pierwsze dziecko względem bieżącego węzła nie musi być identyczne z wartością zwracaną przez właściwość Node.firstChild. Wszystko będzie zależne od sposobu filtracji węzłów.

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? firstChild();
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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