element.childNodes

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété en lecture seule Node.childNodes renvoie une NodeList (liste de noeuds) de noeuds enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0.

Syntaxe

js
var collNoeuds = elementDeReference.childNodes;

Exemples

Utilisation simple

js
// parg est une référence d'objet pour un élément <p>

// D'abord vérifier que l'élément a des noeuds enfants
if (parg.hasChildNodes()) {
  var children = parg.childNodes;

  for (var i = 0; i < children.length; i++) {
    // faire quelque chose avec chaque enfant[i]
    // NOTE: La liste est en ligne, l'ajout ou la suppression des enfants changera la liste
  }
}

Supprimer tous les enfants d'un nom

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

Notes

Les éléments de la collection de noeuds 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 elementNodeReference.childNodes[1].nodeName pour obtenir son nom, etc.)

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 (X)HTML il s'agit d'éléments HTML).

childNodes inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez ParentNode.children à la place.

Spécifications

Specification
DOM
# ref-for-dom-node-childnodes①

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
childNodes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi