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
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.
Im Frickl setzt der Parser wieder Whitespace zwischen die Elemente.
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:
- Was ist das DOM?
- Baumstruktur
- Elementknoten ansprechen
- Textknoten ansprechen
Weblinks
- WHATWG: node.childNodes
- MDN: node.childNodes