JavaScript/DOM/Node/childNodes

Die Eigenschaft node.childNodes speichert einen Array aus verfügbaren Kindknoten eines Knotens.

Syntax

let nodeList = elementNodeReference.childNodes;

• nodeList: Sammlung von Node-Objekten (live NodeList), die Kindknoten des aktuellen Elements sind

Node-Inspektor ansehen …

document.body.addEventListener('click', function (event) {
	const clickedElement = event.target;
	const nodeType = clickedElement.nodeType;
	const nodeName = clickedElement.nodeName;
	const childNodes = clickedElement.childNodes;
	// Create a readable child nodes list
	const childNodesInfo = Array.from(childNodes)
		.map(node =>
			`Type: ${node.nodeType}, Name: ${node.nodeName}, Content: "${node.textContent.trim()}"`
		)
		.join('\n');
	// Update the output element
	const output = document.querySelector('#output pre');
	output.textContent =
		`Node Type: ${nodeType}\nNode Name: ${nodeName}\nChild Nodes:\n${childNodesInfo}`;
});

Die Webseite enthält mehrere Elemente. Bei einem Klick auf ein Element werden nodeName und nodeType, sowie eventuelle childNodes ermittelt und im unteren div ausgegeben.

Beachten Sie: Gemäß dem DOM stellt bereits ein Zeilenumbruch oder ein Leerzeichen im Quelltext zwischen Elementknoten einen eigenen Text-Kindknoten dar. Auch HTML-Kommentare sind eigene Knoten. Daran halten sich alle gängigen Browser.

Hinweis:

Öffnen Sie das Beispiel mit Vorschau in einem neuen Tab!
Im Frickl setzt der Parser wieder Whitespace zwischen die Elemente.

gleiches Markup - unterschiedliche Anzahl Kindknoten? ansehen …

  var anzahl1 = document.getElementById("ersteListe").childNodes.length;    
  document.querySelector('#output1').innerText = anzahl1;
  var anzahl2 = document.getElementById("zweiteListe").childNodes.length;    
  document.querySelector('#output2').innerText = anzahl2;

Im Beispiel sind zwei Listen definiert. Beide unterscheiden sich nur dahingehend, dass sich zwischen den einzelnen Elementen der erste Liste keine Leerzeichen oder Zeilenumbrüche befinden. In der zweiten Liste dagegen wurden Leerzeichen und Zeilenumbrüche verwendet. Standardkonforme Browser geben für die erste Liste als Anzahl der Kindknoten 2 aus und für die zweite Liste 5. Die jeweiligen Leerzeichen und Zeilenumbrüche werden als eigene Kindknoten betrachtet.

Siehe auch

Mit den Eigenschaften des Node-Objekts werden alle Knoten - auch Textknoten (evtl. sogar mit Whitespace) - ermittelt. Meist will man aber nur Elementknoten ansprechen. Hier haben andere Schnittstellen bessere Methoden, die die gewünschten Elemente herausfiltern:

parentNode→parentElementpreviousSibling→previousElementSiblingnextSibling → nextElementSiblingchildNodes→children (alle Kindelemente)firstChild→firstElementChildlastChild→lastElementChild

• 

  Was ist das DOM?
  • Baumstruktur
  • Elementknoten ansprechen
  • Textknoten ansprechen
   

Weblinks

• WHATWG: node.childNodes
• MDN: node.childNodes