Recomendação de curso:

Atributo firstChild do Elemento HTML

firstChild Definição e uso

firstChild O atributo retorna o primeiro filho do nó especificado, como objeto Node.

firstChild O atributo é só de leitura. childNodes[0] Mesmo.

Atenção

firstChild Retorna o primeiro nó filho: nó de elemento, nó de texto ou nó de comentário.

Os espaços em branco entre elementos também são nós de texto.

Alternativa:

Atributo firstElementChild - firstElementChild Atributo retorna o primeiro elemento filho (ignora nós de texto e de comentário).

Veja também:

Atributo childNodes

Atributo lastChild

Atributo nextSibling

Atributo previousSibling

Atributos de nó

Atributo parentNode

Atributo nodeName

Atributo nodeType

Atributo nodeValue

Exemplo

Exemplo 1

Retorne o conteúdo HTML do primeiro filho do elemento <ul>:

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

Experimente você mesmo

Exemplo 2

Obtenha o texto do primeiro filho do elemento <select>:

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

Experimente você mesmo

Exemplo 3

Este exemplo demonstra a interferência do espaço em branco.

Tente obter o nome do nó do primeiro filho de "myDIV":

<div id="myDIV">
  <p>Parece primeiro filho</p>
  <p>Parece último Filho</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Experimente você mesmo

Exemplo 4

Mas, se você remover os espaços do código-fonte, não há nó #text no "myDIV":

<div id="myDIV"><p>Primeiro filho</p><p>Último Filho</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Experimente você mesmo

Nós HTML e elementos

em HTML DOMno (Document Object Model), o documento HTML é uma coleção de nós (ou não) que possuem (ou não) filhos.

NóÉ nó de elemento, nó de texto e nó de comentário.

ElementoOs espaços entre eles também são nós de texto.

O elemento é apenas nó de elemento.

Nó filho e elemento filho

childNodes RetornaNó filho（nós de elemento, de texto e de comentário）.

children RetornaElemento filho（não são nós de texto e de comentário）.

firstChild e firstElementChild

firstChild Retorna o primeiroNó filho（nós de elemento, de texto ou de comentário）. Os espaços entre elementos também são nós de texto.

firstElementChild Retorna o primeiroElemento filho（não retorna nós de texto e de comentário）.

lastChild e lastElementChild

lastChild Retorna o últimoNó filho（nós de elemento, de texto ou de comentário）. Os espaços entre elementos também são nós de texto.

lastElementChild Retorna o últimoElemento filho（não retorna nós de texto e de comentário）.

Sintaxe

element.firstChild

ou

node.firstChild

Retorno

Tipo Descrição
Nó

Primeiro filho do nó.

Se não houver filhos, retorna null.

Suporte do navegador

element.firstChild É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam completamente:

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