Propriété HTML DOM firstChild
Exemple
Obtenez le contenu HTML du premier nœud enfant d'un élément <ul> :
var x = document.getElementById("myList").firstChild.innerHTML;
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La propriété firstChild renvoie le premier nœud enfant du nœud spécifié, en tant qu'objet Node.
La différence entre cette propriété et firstElementChild , est que firstChild renvoie le premier nœud enfant en tant que nœud d'élément, un nœud de texte ou un nœud de commentaire (selon le premier), tandis que firstElementChild renvoie le premier nœud enfant en tant que nœud d'élément (ignore le texte et nœuds de commentaire).
Remarque : les espaces à l'intérieur des éléments sont considérés comme du texte et le texte est considéré comme des nœuds (voir "Plus d'exemples").
Cette propriété est en lecture seule.
Astuce : Utilisez la propriété element .childNodes pour renvoyer tout nœud enfant d'un nœud spécifié. childNodes[0] produira le même résultat que firstChild.
Conseil : Pour renvoyer le dernier nœud enfant d'un nœud spécifié, utilisez la propriété lastChild .
Prise en charge du navigateur
Property | |||||
---|---|---|---|---|---|
firstChild | Yes | Yes | Yes | Yes | Yes |
Syntaxe
node.firstChild
Détails techniques
Valeur de retour : | Un objet Node, représentant le premier enfant d'un nœud, ou null s'il n'y a pas de nœuds enfants |
---|---|
Version DOM | Objet de nœud principal de niveau 1 |
Plus d'exemples
Exemple
Dans cet exemple, nous montrons comment les espaces blancs peuvent interférer avec cette propriété.
Obtenez le nom de nœud du premier nœud enfant d'un élément <div> :
<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
Exemple
Cependant, si nous supprimons l'espace blanc de la source, il n'y a pas de nœuds #text dans <div>, ce qui fera de l'élément <p> le premier nœud enfant :
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
Exemple
Obtenez le texte du premier nœud enfant d'un élément <select> :
var x = document.getElementById("mySelect").firstChild.text;
Pages connexes
Référence HTML DOM : nœud. Propriété lastChild
Référence HTML DOM : nœud. Propriété childNodes
Référence HTML DOM : nœud. Propriété parentNode
Référence HTML DOM : nœud. Propriété nextSibling
Référence HTML DOM : nœud. Propriété précédenteSibling
Référence HTML DOM : nœud. Propriété nodeName