Proprietà firstChild dell'elemento HTML DOM

Definizione e uso

firstChild Proprietà restituisce il primo nodo figlio del nodo specificato come oggetto Node.

firstChild Proprietà sono a sola lettura.

firstChild Proprietà e childNodes[0] Uguale.

Attenzione

firstChild Restituisce il primo nodo figlio: nodo elemento, nodo testo o nodo commento.

Gli spazi tra gli elementi sono anche nodi di testo.

Alternativa:

Proprietà firstElementChild - firstElementChild Proprietà che restituisce il primo elemento figlio (ignora i nodi di testo e i commenti).

Vedi anche:

Proprietà childNodes

Proprietà lastChild

Proprietà nextSibling

Proprietà previousSibling

Proprietà dei nodi

Proprietà parentNode

Proprietà nodeName

Proprietà nodeType

Proprietà nodeValue

Esempio

Esempio 1

Restituisce il contenuto HTML del primo figlio dell'elemento <ul>:

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

Prova tu stesso

Esempio 2

Ottieni il testo del primo figlio del nodo <select>:

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

Prova tu stesso

Esempio 3

Questo esempio dimostra l'interruzione dello spazio.

Tentativo di ottenere il nome del primo figlio del nodo "myDIV":

<div id="myDIV">
  <p>Sembra essere il primo figlio</p>
  <p>Sembra essere l'ultimo figlio</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Prova tu stesso

Esempio 4

Ma, se elimini gli spazi dal sorgente, non ci sono nodi #text in "myDIV":

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

Prova tu stesso

Nodi HTML e elementi

In HTML DOMIn (Document Object Model), l'HTML documento è una raccolta di nodi (o senza figli).

NodoÈ un nodo di elemento, nodo di testo e nodo di commento.

ElementoGli spazi tra gli elementi sono anche nodi di testo.

Un elemento è solo un nodo di elemento.

Nodi figlio e elementi figlio

childNodes RestituisceNodo figlio（nodi di elemento, testo e commento).

children RestituisceElemento figlio（non nodi di testo e commenti).

firstChild e firstElementChild

firstChild Restituisce il primoNodo figlio（nodi di elemento, testo o commento). Gli spazi tra gli elementi sono anche nodi di testo.

firstElementChild Restituisce il primoElemento figlio（non restituisce nodi di testo e commenti).

lastChild e lastElementChild

lastChild Restituisce l'ultimoNodo figlio（nodi di elemento, testo o commento). Gli spazi tra gli elementi sono anche nodi di testo.

lastElementChild Restituisce l'ultimoElemento figlio（non restituisce nodi di testo e commenti).

Sintassi

element.firstChild

o

node.firstChild

Valore di ritorno

Tipo Descrizione
Nodo

Il primo figlio del nodo.

Se non ci sono figli, restituisce null.

Supporto del browser

element.firstChild È una funzionalità di DOM Level 1 (1998).

Tutti i browser lo supportano completamente:

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