Node : propriété childNodes

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilité complète

La propriété en lecture seule childNodes de l'interface Node retourne un objet NodeList dynamique des nœuds enfants de l'élément donné, où le premier nœud enfant se voit attribuer l'index 0. Les nœuds enfants incluent les éléments, le texte et les commentaires.

Note : Le fait que l'objet NodeList soit dynamique signifie que son contenu est modifié chaque fois que de nouveaux enfants sont ajoutés ou supprimés.

Les navigateurs insèrent des nœuds texte dans un document pour représenter les espaces blancs dans le balisage source. Par conséquent, un nœud obtenu, par exemple en utilisant Node.childNodes[0], peut faire référence à un nœud texte représentant un espace blanc plutôt qu'à l'élément réel que l'auteur·ice souhaitait obtenir.

Voir Travailler avec les espaces blancs dans le DOM pour plus d'informations.

Les éléments de la collection de nœuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés. Par exemple, pour obtenir le nom du premier nœud enfant, vous pouvez utiliser elementNodeReference.childNodes[0].nodeName.

L'objet document lui-même a deux enfants : la déclaration Doctype et l'élément racine, généralement appelés documentElement. Dans les documents HTML, ce dernier est l'élément <html>.

Il est important de garder à l'esprit que childNodes inclut tous les nœuds enfants, y compris les nœuds qui ne sont pas des éléments comme les nœuds texte et commentaire. Pour obtenir une collection contenant uniquement des éléments, utilisez Element.children à la place.

// Notez que para est une référence d'objet à un élément <p>

// D'abord vérifier que l'élément a des nœuds enfants
if (para.hasChildNodes()) {
  let enfants = para.childNodes;

  for (const noeud of enfants) {
    // Faire quelque chose avec chaque enfant comme enfants[i]
    // NOTE: la liste est dynamique ! L'ajout ou la suppression d'enfants change la `length` de la liste
  }
}

Supprimer tous les enfants d'un nom

// Voici une manière de supprimer tous les enfants d'un nœud
// boite est une référence à un élément
while (boite.firstChild) {
  // La liste est dynamique, elle est donc ré-indexée à chaque appel
  boite.removeChild(boite.firstChild);
}