Atributo children del elemento del DOM HTML

Definición y uso

children Atributo devuelve la colección de subelementos del elemento.

children Atributo devuelve un objeto HTMLCollection.

Por favor, consulte:

Atributo firstElementChild

Atributo lastElementChild

Atributo nextElementSibling

Atributo previousElementSibling

Atributo childElementCount

Atributo childNodes

Nodos de HTML y elementos

En HTML DOM（文档对象模型）中，HTML 文档是拥有（或没有）子节点的节点集合。

NodoSe refiere a los nodos de elemento, nodos de texto y nodos de comentario.

ElementoEl espacio en blanco entre ellos también es un nodo de texto.

Mientras que el elemento es solo un nodo de elemento.

Subnodos y subelementos

childNodes DevuelveSubnodos（元素节点、文本节点和注释节点）。

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

Hermanos y hermanos de elementos

hermanoSon "hermano" y "hermana".

hermanoes un nodo que tiene el mismo nodo padre (en el mismo childNodes de la lista).

hermano de elementoes un elemento que tiene el mismo padre elemento (en el mismo children de la lista).

Ejemplo

Ejemplo 1

Obtener el conjunto de elementos secundarios del elemento <body>:

const collection = document.body.children;

Prueba tu mismo

Ejemplo 2

¿Cuántos elementos secundarios tiene "myDIV"?:

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

Prueba tu mismo

Ejemplo 3

Cambiar el fondo del segundo elemento secundario de "myDIV":

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

Prueba tu mismo

Ejemplo 4

Obtener el texto del tercer elemento secundario del elemento <select> (índice 2):

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

Prueba tu mismo

Ejemplo 5

Recorrer todos los elementos secundarios de <body> y cambiar su fondo:

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

Prueba tu mismo

Sintaxis

element.children

Valor devuelto

Tipo Descripción
Objeto

Objeto HTMLCollection.

Conjunto de nodos de elementos.

Los elementos se ordenan según su aparición en el documento.

Compatibilidad del navegador

element.children Es una característica de DOM Level 1 (1998).

Todos los navegadores lo soportan completamente:

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