Proprietà firstChild DOM HTML
Esempio
Ottieni il contenuto HTML del primo nodo figlio di un elemento <ul>:
var x = document.getElementById("myList").firstChild.innerHTML;
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La proprietà firstChild restituisce il primo nodo figlio del nodo specificato, come oggetto Node.
La differenza tra questa proprietà e firstElementChild , è che firstChild restituisce il primo nodo figlio come nodo elemento, un nodo di testo o un nodo di commento (a seconda di quale è il primo), mentre firstElementChild restituisce il primo nodo figlio come nodo elemento (ignora il testo e nodi di commento).
Nota: gli spazi vuoti all'interno degli elementi sono considerati come testo e il testo come nodi (vedi "Altri esempi").
Questa proprietà è di sola lettura.
Suggerimento: utilizzare la proprietà dell'elemento .childNodes per restituire qualsiasi nodo figlio di un nodo specificato. childNodes[0] produrrà lo stesso risultato di firstChild.
Suggerimento: per restituire l'ultimo nodo figlio di un nodo specificato, utilizzare la proprietà lastChild .
Supporto browser
| Property | |||||
|---|---|---|---|---|---|
| firstChild | Yes | Yes | Yes | Yes | Yes |
Sintassi
node.firstChild
Dettagli tecnici
| Valore di ritorno: | Un oggetto Node, che rappresenta il primo figlio di un nodo, o null se non sono presenti nodi figlio |
|---|---|
| Versione DOM | Oggetto nodo di livello 1 principale |
Altri esempi
Esempio
In questo esempio, dimostriamo come gli spazi bianchi possono interferire con questa proprietà.
Ottieni il nome del nodo del primo nodo figlio di un elemento <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>
Esempio
Tuttavia, se rimuoviamo lo spazio bianco dal sorgente, non ci sono nodi #text in <div>, il che renderà l'elemento <p> il primo nodo figlio:
<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>
Esempio
Ottieni il testo del primo nodo figlio di un elemento <select>:
var x = document.getElementById("mySelect").firstChild.text;
Pagine correlate
Riferimento HTML DOM: nodo. proprietà lastChild
Riferimento HTML DOM: nodo. proprietà childNodes
Riferimento HTML DOM: nodo. proprietà parentNode
Riferimento HTML DOM: nodo. nextSibling Property
Riferimento HTML DOM: nodo. precedenteProprietà di pari livello
Riferimento HTML DOM: nodo. NodeName