Résumé
Renvoie le premier nœud enfant du nœud courant, ou null s'il n'en a pas.
Syntaxe
noeudEnfant =noeud.firstChild;
La variable noeudEnfant est une référence au premier enfant de noeud s'il y en a un, sinon elle vaudra null.
Exemple
Cet exemple montre comment utiliser firstChild et la manière dont les nœuds d'espaces peuvent interférer avec l'utilisation de cette propriété. Consultez la section Notes pour plus d'informations sur la gestion des espaces dans le DOM de Gecko.
<p id="para-01">
<span>Premier span</span>
</p>
<script type="text/javascript">
var p01 = document.getElementById('para-01');
alert(p01.firstChild.nodeName)
</script>
Dans le code ci-dessus, l'alerte affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrante <p> et <span>. Tout espace provoquera l'insertion d'un nœud texte, qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.
Un autre nœud texte est inséré entre les balises de fermeture </span> et </p>.
Si ces espaces sont retirés du code source, les nœuds texte n'apparaîtront plus et l'élément span deviendra le premier enfant du paragraphe.
<p id="para-01"><span>Premier span</span></p>
<script type="text/javascript">
var p01 = document.getElementById('para-01');
alert(p01.firstChild.nodeName)
</script>
À présent, l'alerte affichera « SPAN ».
Notes
Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via Node.firstChild ou
Node.previousSibling peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
que l'auteur comptait obtenir.
Consultez Gestion des espaces dans le DOM et Why are some Text nodes empty? dans la FAQ DOM 3 du W3C pour plus d'informations.
On utilise parfois document.firstChild pour obtenir l'élément racine d'un document. Ce n'est pas correct, car on recevra une instruction de traitement ou un autre nœud du prologue s'il y en a. Il vaut donc mieux utiliser document.documentElement.
Spécification
- DOM Level 1 Core: firstChild — traduction (non normative)
- DOM Level 2 Core: firstChild — traduction (non normative)