Exemple
Obtenez le contenu HTML du premier noeud enfant d'un <ul> élément:
var x = document.getElementById("myList").firstChild.innerHTML;Le résultat de x sera:
Coffee Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété firstChild renvoie le premier noeud enfant du noeud spécifié, comme un objet de noeud.
La différence entre cette propriété et firstElementChild , est que firstChild renvoie le premier nœud enfant comme un nœud d'élément, un nœud de texte ou d' un noeud de commentaire (depending on which one's first) en (ignores text and comment nodes) (depending on which one's first) , alors que firstElementChild renvoie le premier nœud enfant comme un nœud d'élément (ignores text and comment nodes) du (ignores text and comment nodes) .
Remarque: à l' intérieur des éléments est Whitespace considéré comme le texte, et le texte est considéré comme nœuds (See "More Examples") .
Cette propriété est en lecture seule.
Astuce: Utilisez l' élément .childNodes propriété pour retourner un noeud enfant d'un noeud spécifié. childNodes [0] produiront le même résultat que firstChild.
Astuce: Pour revenir le dernier noeud enfant d'un noeud spécifié, utilisez la lastChild propriété.
Support du navigateur
| Propriété | |||||
|---|---|---|---|---|---|
| firstChild | Oui | Oui | Oui | Oui | Oui |
Syntaxe
node .firstChildDétails techniques
| Valeur de retour: | Un objet de noeud représentant le premier enfant d'un noeud, ou null s'il n'y a pas de nœuds enfants |
|---|---|
| version DOM | Niveau de base 1 Noeud objet |
autres exemples
Exemple
Dans cet exemple, nous montrons comment les espaces peuvent interfare avec cette propriété.
Obtenez le nom de noeud du premier noeud enfant d'un <div> élément:
<!--
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>Le résultat de x sera:
#text Essayez vous - même » Exemple
Cependant, si on enlève les espaces blancs de la source, il n'y a pas de nœuds dans #text <div>, qui fera le <p> élément 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>Le résultat de x sera:
P Essayez vous - même » Exemple
Obtenez le texte du premier noeud enfant d'un <select> élément:
var x = document.getElementById("mySelect").firstChild.text;Le résultat de x sera:
Audi Essayez vous - même » Pages associées
Référence HTML DOM: nœud. propriété lastChild
Référence HTML DOM: nœud. childNodes propriété
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é previousSibling
Référence HTML DOM: nœud. nodeName propriété