Beispiel
Hier finden Sie eine Sammlung der <body> Element der Kinder:
var c =
document.body.children; Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die Kinder-Eigenschaft gibt eine Sammlung ein untergeordnetes Element des Elements als HTMLCollection Objekt.
Die Elemente in der Sammlung werden sortiert, wie sie in dem Quellcode erscheinen und können durch Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Tipp: Sie können die Länge Eigenschaft des HTMLCollection Objekt verwenden , um die Anzahl der untergeordneten Elemente zu bestimmen, dann können Sie eine Schleife durch alle Kinder und extrahieren Sie die Informationen , die Sie wollen.
Der Unterschied zwischen dieser Eigenschaft und childnodes , ist , dass alle Knoten enthalten childnodes, einschließlich Textknoten und Kommentarknoten, während die Kinder nur Elementknoten enthalten.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| children | 2.0 | 9.0 * | 3.5 | 4.0 | 10.0 |
* Hinweis: Die Kinder Eigenschaft wird in IE6 IE8 voll unterstützt. Doch auch in diesen Versionen, gibt es Elementknoten und Kommentarknoten. IE9 + gibt nur Elementknoten.
Syntax
element .childrenTechnische Details
| Rückgabewert: | Ein Live-HTMLCollection Objekt, eine Sammlung von Elementknoten darstellt. Die Elemente in der zurückgegebenen Auflistung sortiert werden, wie sie im Quelltext erscheinen |
|---|---|
| DOM Version | Core Level 1 Element Object |
Mehr Beispiele
Beispiel
Finden Sie heraus , wie viele Kinder eine <div> Element hat:
var c =
document.getElementById("myDIV").children.length;Das Ergebnis von c wird:
2 Versuch es selber " Beispiel
Ändern Sie die Hintergrundfarbe des zweiten Kindes Element eines <div> Element:
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow"; Versuch es selber " Beispiel
Holen Sie sich den Text des dritten Kind Elements (index 2) ein <select> Element:
var c = document.getElementById("mySelect").children[2].text;Das Ergebnis von c wird:
Saab Versuch es selber " Beispiel
Schleife durch alle Kinder von <body> und deren Hintergrundfarbe auf rot:
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++)
{
c[i].style.backgroundColor = "red";
} Versuch es selber " Verwandte Seiten
HTML - DOM - Referenz: childNodes Property