La proprietà di sola lettura Node.firstChild restituisce il primo figlio del nodo nell'albero o null se il nodo non ha figli. Se il nodo è un Document, restituisce il primo nodo nell'elenco dei suoi figli diretti.

Sintassi

var childNode = node.firstChild;

Esempio

Questo esempio dimostra l'uso di firstChild e il modo in cui i nodi degli spazi bianchi potrebbero interferire con l'utilizzo di questa proprietà.

<p id="para-01">
  <span>First span</span>
</p>

<script>
  var p01 = document.getElementById('para-01');
  console.log(p01.firstChild.nodeName);
</script>

In quanto sopra, la console console mostrerà '#text' perché viene inserito un nodo di testo per mantenere lo spazio bianco tra la fine dei tag di apertura <p> e <span>. Qualsiasi spazio bianco creerà un nodo #text da un singolo spazio a più spazi, ritorni, schede e così via.

Un altro nodo #text viene inserito tra i tag di chiusura </span> e </p>.

Se questo spazio viene rimosso dall'origine, i nodi #text non vengono inseriti e l'elemento span diventa il primo figlio del paragrafo.

<p id="para-01"><span>First span</span></p>

<script>
  var p01 = document.getElementById('para-01');
  console.log(p01.firstChild.nodeName);
</script>

Ora l'avviso mostrerà 'SPAN'.

Per evitare il problema con node.firstChild che restituisce i nodi #text#comment, ParentNode.firstElementChild può essere utilizzato per restituire solo il primo nodo elemento. Tuttavia, node.firstElementChild richiede uno shim per Internet Explorer 9 e versioni precedenti.

Specifiche

Specifica Stato Commentp
DOM
The definition of 'Node.firstChild' in that specification.
Living Standard Nessun cambiamento
Document Object Model (DOM) Level 3 Core Specification
The definition of 'Node.firstChild' in that specification.
Obsolete Nessun cambiamento
Document Object Model (DOM) Level 2 Core Specification
The definition of 'Node.firstChild' in that specification.
Obsolete Nessun cambiamento
Document Object Model (DOM) Level 1 Specification
The definition of 'Node.firstChild' in that specification.
Obsolete Definizione iniziale

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
firstChildChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: mdnwebdocs-bot, IsibisiDev, wbamberg, render93, teoli, khalid32, Sheppy, DaViD83
Ultima modifica di: mdnwebdocs-bot,