element.firstChild

« Référence du DOM

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

 

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : Sheppy, BenoitL, Takenbot, Mgjbot
Dernière mise à jour par : Sheppy,