Propriété children de l'élément du DOM HTML

Définition et utilisation

children La propriété retourne la collection des éléments enfants de l'élément.

children La propriété retourne un objet HTMLCollection.

Veuillez également consulter :

propriété firstElementChild

propriété lastElementChild

propriété nextElementSibling

propriété previousElementSibling

propriété childElementCount

propriété childNodes

Nœuds HTML et éléments

Dans HTML DOM（Modèle d'Objet Document）, un document HTML est un ensemble de nœuds possédant (ou ne possédant pas) des nœuds enfants.

NœudIl s'agit des nœuds d'élément, des nœuds de texte et des nœuds de commentaires.

ÉlémentLes espaces blancs entre eux sont également des nœuds de texte.

tandis que l'élément est seulement un nœud d'élément.

Nœuds fils et éléments fils

childNodes RetournerNœuds fils（nœuds d'élément, nœuds de texte et nœuds de commentaires）.

children RetournerFils élément（au lieu de nœuds de texte et de commentaires）.

Frères et sœurs de l'élément

frèreSont les 'frères' et les 'sœurs'.

frèresont des nœuds qui possèdent le même parent (dans le même childNodes de la liste).

frère d'élémentsont des éléments qui possèdent le même parent (dans le même children de la liste).

Exemple

Exemple 1

Obtenir la collection des éléments enfants de l'élément <body> :

const collection = document.body.children;

Essayez-le vous-même

Exemple 2

Combien d'éléments enfants "myDIV" ?

let count = document.getElementById("myDIV").children.length;

Essayez-le vous-même

Exemple 3

Changer l'arrière-plan du deuxième élément enfant de "myDIV" :

const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";

Essayez-le vous-même

Exemple 4

Obtenir le texte de l'élément enfant suivant du troisième élément (index 2) de l'élément <select> :

const collection = document.getElementById("mySelect").children[2].text;

Essayez-le vous-même

Exemple 5

Parcourir tous les éléments enfants de <body> et changer leur arrière-plan :

const collection = document.body.children;
for (let i = 0; i < collecton.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Essayez-le vous-même

Syntaxe

element.children

Valeur de retour

Type Description
Objet

Objet HTMLCollection.

Collection d'éléments de noeuds.

Les éléments sont classés dans l'ordre de leur apparition dans le document.

Support du navigateur

element.children C'est une caractéristique de DOM Level 1 (1998).

Tous les navigateurs le supportent pleinement :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support