Attribut childNodes de l'élément HTML DOM

Définition et utilisation

childNodes L'attribut retourne la collection des éléments enfants (liste).

childNodes L'attribut retourne un objet NodeList.

childNodes L'attribut est en lecture seule.

childNodes[0] Identique à firstChild.

Avis

childNodes Retourne le nœud : nœud d'élément, nœud de texte et nœud de commentaire.

Les espaces entre les éléments sont également des nœuds de texte.

Solution de remplacement :

Attribut children - children L'attribut retourne les éléments enfants (ignore les nœuds de texte et de commentaire).

Veuillez également consulter :

Attribut firstChild

Attribut lastChild

Attribut nextSibling

Attribut previousSibling

Méthode hasChildNodes()

Attribut de noeud

Attribut parentNode

Attribut nodeName

Propriété nodeType

Propriété nodeValue

Les nœuds HTML et les éléments

Dans HTML DOMDans le (document object model), un document HTML est une collection de nœuds (ou sans) qui ont (ou n'ont pas) des sous-nœuds.

NœudSe réfère aux nœuds d'élément, de texte et de commentaire.

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

Et les éléments ne sont que des nœuds d'élément.

Sous-nœuds et sous-éléments

childNodes RetourneSous-nœuds（nœuds d'élément, nœuds de texte et nœuds de commentaire）.

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

Frères et soeurs avec frères et soeurs d'éléments

Frères et soeursSont les "frères" et "sœurs".

Frères et soeursSont des nœuds qui ont le même parent (dans le même childNodes de la liste).

Frères et soeurs d'élémentsSont des éléments qui ont le même parent (dans le même children de la liste).

Exemple

Exemple 1

Obtenir les sous-nœuds de l'élément <body> :

const nodeList = document.body.childNodes;

Essayez-le vous-même

Exemple 2

Obtenir le nombre de sous-nœuds dans "myDIV" :

let numb = document.getElementById("myDIV").childNodes.length;

Essayez-le vous-même

Exemple 3

Changer la couleur de fond du deuxième sous-nœud :

element.childNodes[1].style.backgroundColor = "yellow";

Essayez-le vous-même

Exemple 4

Obtenir le texte du troisième sous-nœud d'un élément <select> :

let text = document.getElementById("mySelect").childNodes[2].text;

Essayez-le vous-même

Syntaxe

element.childNodes

Valeur retournée

Type Description
Objet

Collection d'objets NodeList de nœuds.

Les nœuds sont classés dans l'ordre de leur apparition dans le document.

Support du navigateur

element.childNodes 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