Atributo childNodes do Elemento DOM HTML

Definição e uso

childNodes O atributo retorna a coleção de nós filhos do elemento (lista).

childNodes O atributo retorna um objeto NodeList.

childNodes O atributo é somente leitura.

childNodes[0] Igual a firstChild.

Dica

childNodes Retorna nó: nó de elemento, nó de texto e nó de comentário.

O espaço em branco entre elementos também é um nó de texto.

Alternativa:

Atributo children - children Atributo retorna o elemento filho (ignora texto e comentários).

Veja também:

Atributo firstChild

Atributo lastChild

Atributo nextSibling

Atributo previousSibling

Método hasChildNodes()

Atributo de nó

Atributo parentNode

Atributo nodeName

Atributo nodeType

Atributo nodeValue

Nós HTML e Elementos

Em HTML DOM(Modelo de Objetos de Documento) Em um documento HTML, é uma coleção de nós (ou não) que possuem (ou não) nós filhos.

NóSe refere a nós de elemento, nó de texto e nó de comentário.

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

Enquanto o elemento é apenas um nó de elemento.

Nó filho e elemento filho

childNodes RetornaNó filho(nós de elemento, nó de texto e nó de comentário).

children RetornaElemento filho(ao invés de nós de texto e comentários).

Irmãos e elementos irmãos

IrmãosSão "irmãos" e "irmãs".

IrmãosSão nós que compartilham o mesmo pai (no mesmo childNodes na lista).

Elemento irmãoSão elementos que compartilham o mesmo pai (no mesmo children na lista).

Exemplo

Exemplo 1

Obtenha os nós filhos do elemento <body>:

const nodeList = document.body.childNodes;

Experimente você mesmo

Exemplo 2

Obtenha o número de nós filhos de "myDIV":

let numb = document.getElementById("myDIV").childNodes.length;

Experimente você mesmo

Exemplo 3

Mude a cor de fundo do segundo nó filho:

element.childNodes[1].style.backgroundColor = "yellow";

Experimente você mesmo

Exemplo 4

Obtenha o texto do terceiro nó filho do elemento <select>:

let text = document.getElementById("mySelect").childNodes[2].text;

Experimente você mesmo

Sintaxe

element.childNodes

Retorno

Tipo Descrição
Objeto

Coleção de objetos NodeList de nós.

Os nós são ordenados pela ordem em que aparecem no documento.

Suporte do Navegador

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

Todos os navegadores suportam plenamente:

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