---
title: Node.firstChild
slug: Web/API/Element/firstChild
tags:
  - API
  - DOM
  - Node
  - Proprietà
  - Referenza
translation_of: Web/API/Node/firstChild
---
<div>{{APIRef("DOM")}}</div>

<p><span class="seoSummary">La proprietà di sola lettura <code><strong>Node.firstChild</strong></code> restituisce il primo figlio del nodo nell'albero o <code>null</code> se il nodo non ha figli.</span> Se il nodo è un <code>Document</code>, restituisce il primo nodo nell'elenco dei suoi figli diretti.</p>

<h2 id="Sintassi">Sintassi</h2>

<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;
</pre>

<h2 id="Esempio">Esempio</h2>

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

<pre class="brush:html">&lt;p id="para-01"&gt;
  &lt;span&gt;First span&lt;/span&gt;
&lt;/p&gt;

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

<p>In quanto sopra, la <a href="/en-US/docs/Web/API/Console">console</a> console mostrerà '#text' perché viene inserito un nodo di testo per mantenere lo spazio bianco tra la fine dei tag di apertura <code>&lt;p&gt;</code> e <code>&lt;span&gt;</code>. <strong>Qualsiasi</strong> <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">spazio bianco</a> creerà un nodo <code>#text</code> da un singolo spazio a più spazi, ritorni, schede e così via.</p>

<p>Un altro nodo <code>#text</code> viene inserito tra i tag di chiusura <code>&lt;/span&gt;</code> e <code>&lt;/p&gt;</code>.</p>

<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>

<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;

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

<p>Ora l'avviso mostrerà 'SPAN'.</p>

<p>Per evitare il problema con <code>node.firstChild</code> che restituisce i nodi <code>#text</code> o <code>#comment</code>, {{domxref("ParentNode.firstElementChild")}} può essere utilizzato per restituire solo il primo nodo elemento. Tuttavia, <code>node.firstElementChild</code> richiede uno shim per Internet Explorer 9 e versioni precedenti.</p>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Stato</th>
   <th scope="col">Commentp</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Nessun cambiamento</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>Nessun cambiamento</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
   <td>{{Spec2('DOM2 Core')}}</td>
   <td>Nessun cambiamento</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Definizione iniziale</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>



<p>{{Compat("api.Node.firstChild")}}</p>