Node : propriété firstChild
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.
La propriété en lecture seule firstChild de l'interface Node retourne le premier nœud enfant de l'arbre, ou null si le nœud n'a pas d'enfants.
Si le nœud est un objet Document, cette propriété retourne le premier nœud de la liste de ses enfants directs.
Note :
Cette propriété retourne tout type de nœud qui est le premier enfant de celui-ci.
Il peut s'agir d'un nœud Text ou Comment.
Si vous souhaitez obtenir le premier élément (Element) qui est un enfant d'un autre élément, utilisez Element.firstElementChild.
Valeur
Un objet Node, ou null s'il n'y en a pas.
Exemples
Cet exemple montre l'utilisation de firstChild et la manière dont les nœuds d'espaces peuvent interférer en utilisant cette propriété.
<p id="para-01">
<span>Premier span</span>
</p>
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName);
Dans l'exemple ci-dessus, la console affiche « #text », car un nœud texte est inséré pour préserver les espaces entre la fin des balises ouvrantes <p> et <span>. Tout espace provoque l'insertion d'un nœud #text, qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.
Un autre nœud #text est inséré entre les balises de fermeture </span> et </p>.
Si ces espaces sont retirés du code source, les nœuds #text ne sont pas insérés et l'élément span devient le premier enfant du paragraphe.
<p id="para-01"><span>Premier span</span></p>
const p01 = document.getElementById("para-01");
console.log(p01.firstChild.nodeName);
À présent, l'alerte affiche « SPAN ».
Pour éviter le problème avec node.firstChild renvoyant des nœuds #text ou #comment, Element.firstElementChild peut être utilisé pour renvoyer uniquement le premier nœud élément.
Spécifications
| Spécification |
|---|
| DOM # ref-for-dom-node-firstchild① |
Compatibilité des navigateurs
Voir aussi
- La propriété
Element.firstElementChild - La propriété
Node.lastChild