Recommandation de cours :

Attribut firstChild de l'élément HTML DOM

firstChild Définition et utilisation

firstChild L'attribut retourne le premier enfant du nœud spécifié, sous forme d'objet Node.

firstChild L'attribut est readonly. childNodes[0] Identique.

Remarque

firstChild Retourner le premier nœud enfant : nœud d'élément, nœud de texte ou nœud de commentaire.

Les espaces entre les éléments sont également des nœuds de texte.

Solution alternative :

Attribut firstElementChild - firstElementChild L'attribut retourne le premier élément enfant (ignore les nœuds de texte et de commentaire).

Veuillez également consulter :

Attribut childNodes

Attribut lastChild

Attribut nextSibling

Attribut previousSibling

Attributs des nœuds

Attribut parentNode

Attribut nodeName

Attribut nodeType

Attribut nodeValue

Exemple

Exemple 1

Retourner le contenu HTML du premier enfant de l'élément <ul> :

document.getElementById("myList").firstChild.innerHTML;

Essayez-le vous-même

Exemple 2

Obtenir le texte du premier enfant de l'élément <select> :

let text = document.getElementById("mySelect").firstChild.text;

Essayez-le vous-même

Exemple 3

Cet exemple montre l'interférence des espaces.

Essayer d'obtenir le nom de l'élément du premier enfant de "myDIV":

<div id="myDIV">
  <p>Looks like first child</p>
  <p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Essayez-le vous-même

Exemple 4

Cependant, si vous supprimez les espaces du code source, il n'y a pas de nœud #text dans "myDIV":

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Essayez-le vous-même

Les nœuds HTML et les éléments

Dans HTML DOMDans (Document Object Model), un document HTML est une collection de nœuds (ou sans) enfants.

NoeudEst un nœud d'élément, un nœud de texte et un nœud de commentaire.

ÉlémentLes espaces entre les éléments sont également des nœuds de texte.

Un élément est un nœud d'élément.

Nœuds enfants et éléments enfants

childNodes RetourneNœud enfant（Nœuds d'élément, nœuds de texte et nœuds de commentaire）.

children RetourneÉlément enfant（Au lieu de nœuds de texte et de nœuds de commentaire）.

firstChild et firstElementChild

firstChild Retourne le premierNœud enfant（Nœuds d'élément, nœuds de texte ou nœuds de commentaire）. Les espaces entre les éléments sont également des nœuds de texte.

firstElementChild Retourne le premierÉlément enfant（Ne retourne pas les nœuds de texte et les nœuds de commentaire）.

lastChild et lastElementChild

lastChild Retourne le dernierNœud enfant（Nœuds d'élément, nœuds de texte ou nœuds de commentaire）. Les espaces entre les éléments sont également des nœuds de texte.

lastElementChild Retourne le dernierÉlément enfant（Ne retourne pas les nœuds de texte et les nœuds de commentaire）.

Syntaxe

element.firstChild

ou

node.firstChild

Valeur de retour

Type Description
Noeud

Premier enfant du noeud.

Si il n'y a pas d'enfant, retourne null.

Support du navigateur

element.firstChild C'est une caractéristique du DOM Level 1 (1998).

Tous les navigateurs le supportent complètement :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support