Node.firstChild

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.

var childNode = node.firstChild;

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 o #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.