A propriedade children do Elemento DOM HTML

Definição e uso

children A propriedade retorna a coleção de elementos filhos do elemento.

children A propriedade retorna um objeto HTMLCollection.

Outra referência:

A propriedade firstElementChild

A propriedade lastElementChild

A propriedade nextElementSibling

A propriedade previousElementSibling

A propriedade childElementCount

A propriedade childNodes

Nó HTML e elemento

Em HTML DOM（文档对象模型）em que o documento HTML é um conjunto de nós que possui (ou não possui) nós filhos.

NóRefere-se ao nó 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（元素节点、文本节点和注释节点）。

children RetornaElemento filho（而非文本和注释节点）。

Irmãos e irmãos de elementos.

irmãosSão 'irmão' e 'irmã'.

irmãosé o nó que possui o mesmo nó pai (no mesmo childNodes da lista).

irmãos de elementosé o elemento que possui o mesmo pai (no mesmo children da lista).

Exemplo

Exemplo 1

Obter a coleção de elementos filhos do elemento <body>:

const collection = document.body.children;

Experimente você mesmo

Exemplo 2

Quantos elementos filhos "myDIV" tem:

let count = document.getElementById("myDIV").children.length;

Experimente você mesmo

Exemplo 3

Mudar o fundo do segundo elemento filho de "myDIV":

const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";

Experimente você mesmo

Exemplo 4

Obter o texto do terceiro elemento filho do elemento <select> (índice 2):

const collection = document.getElementById("mySelect").children[2].text;

Experimente você mesmo

Exemplo 5

Percorrer todos os elementos filhos do <body> e mudar suas cores de fundo:

const collection = document.body.children;
for (let i = 0; i < collecton.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Experimente você mesmo

Sintaxe

element.children

Retorno

Tipo Descrição
Objeto

Objeto HTMLCollection.

Conjunto de nós de elementos.

Os elementos são ordenados conforme aparecem no documento.

Suporte do navegador

element.children É 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