Untergeordnete HTML-DOM-Elemente
Das Element-ObjektBeispiel
Rufen Sie eine Sammlung der untergeordneten Elemente des <body>-Elements ab:
const collection = document.body.children;
Weitere Beispiele unten.
Definition und Verwendung
Die childrenEigenschaft gibt eine Auflistung der untergeordneten Elemente eines Elements zurück.
Die childrenEigenschaft gibt ein HTMLCollection-Objekt zurück.
Ein Unterschied
Die childNodesEigenschaft gibt alle untergeordneten Knoten zurück , einschließlich Textknoten und Kommentarknoten, während die childrenEigenschaft nur die untergeordneten Elemente zurückgibt .
Siehe auch:
Die ChildNodes-Eigenschaft des Elements
HTMLCollection
Eine HTMLCollection ist eine Sammlung von HTML-Knoten.
Auf Knoten in einer Sammlung kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Die Eigenschaft length gibt die Anzahl der Elemente in der Sammlung zurück.
Syntax
element.children
Rückgabewert
| Typ | Beschreibung |
| Objekt | Ein HTMLCollection-Objekt. Die Sammlung von Elementknoten. Die Elemente werden so sortiert, wie sie im Dokument erscheinen. |
Mehr Beispiele
Finden Sie heraus, wie viele Kinder ein <div>-Element hat:
var c =
document.getElementById("myDIV").children.length;
Ändern Sie die Hintergrundfarbe des zweiten untergeordneten Elements eines <div>-Elements:
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";
Rufen Sie den Text des dritten untergeordneten Elements (Index 2) eines <select>-Elements ab:
var c = document.getElementById("mySelect").children[2].text;
Durchlaufen Sie alle untergeordneten Elemente von <body> und ändern Sie deren Hintergrundfarbe in Rot:
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++) {
c[i].style.backgroundColor = "red";
}
Verwandte Seiten
HTML-DOM-Referenz: childNodes-Eigenschaft
Browser-Unterstützung
element.children ist eine Funktion von DOM Level 1 (1998).
Es wird in allen Browsern vollständig unterstützt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |
Das Element-Objekt