Exemple
Obtenez une collection de <body> enfants de l' élément:
var c =
document.body.children; Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Les enfants propriété renvoie une collection des éléments enfants d'un élément, comme un objet HTMLCollection.
Les éléments de la collection sont classés comme ils apparaissent dans le code source et sont accessibles par des numéros d'index. L'indice commence à 0.
Astuce: Vous pouvez utiliser la propriété de longueur de l'objet HTMLCollection pour déterminer le nombre d'éléments de l' enfant, alors vous pouvez boucle à travers tous les enfants et extraire les informations que vous voulez.
La différence entre cette propriété et childNodes , est que childNodes contiennent tous les noeuds, y compris les noeuds texte et les nœuds de commentaires, alors que les enfants ne contiennent que des noeuds d'élément.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| children | 2.0 | 9.0 * | 3.5 | 4.0 | 10.0 |
* Note: La propriété des enfants est entièrement pris en charge dans IE6 à IE8. Cependant, dans ces versions, il retourne aux noeuds d'éléments noeuds de commentaire. IE9 + renvoie uniquement les noeuds d'éléments.
Syntaxe
element .childrenDétails techniques
| Valeur de retour: | Un objet HTMLCollection en direct, ce qui représente un ensemble de noeuds d'éléments. Les éléments de la collection retournés sont classés comme ils apparaissent dans le code source |
|---|---|
| version DOM | Niveau de base 1 Élément objet |
autres exemples
Exemple
Découvrez combien d'enfants un <div> élément a:
var c =
document.getElementById("myDIV").children.length;Le résultat de c sera:
2 Essayez vous - même » Exemple
Changer la couleur de fond du second élément enfant d'un <div> élément:
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow"; Essayez vous - même » Exemple
Obtenez le texte du troisième élément enfant (index 2) d'un <select> élément:
var c = document.getElementById("mySelect").children[2].text;Le résultat de c sera:
Saab Essayez vous - même » Exemple
Boucle à travers tous les enfants de <body> et changer leur couleur d'arrière - plan rouge:
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++)
{
c[i].style.backgroundColor = "red";
} Essayez vous - même » Pages associées
Référence HTML DOM: childNodes Property