Atributo childNodes del Elemento DOM HTML

Definición y uso

childNodes El atributo devuelve la colección de nodos hijos del elemento (lista).

childNodes El atributo devuelve un objeto NodeList.

childNodes El atributo es de solo lectura.

childNodes[0] Igual que firstChild.

Consejo

childNodes Devuelve el nodo: nodo de elemento, nodo de texto y nodo de comentario.

El espacio en blanco entre elementos también es un nodo de texto.

Solución alternativa:

Atributo children - children El atributo devuelve los elementos hijos (ignora los nodos de texto y los comentarios).

Por favor, consulte:

Atributo firstChild

Atributo lastChild

Atributo nextSibling

Atributo previousSibling

Método hasChildNodes()

Atributo de nodo

Atributo parentNode

Atributo nodeName

propiedad nodeType

propiedad nodeValue

Nodos HTML y elementos

En HTML DOM（Modelo de Objetos de Documento HTML）, el documento HTML es una colección de nodos que tienen (o no tienen) nodos hijos.

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

ElementoLos espacios en blanco entre ellos también son nodos de texto.

y el elemento es solo un nodo de elemento.

Nodo hijo y elemento hijo

childNodes DevuelveNodo hijo（nodos de elemento, nodos de texto y nodos de comentario）.

children DevuelveElemento hijo（no nodos de texto y comentarios）.

Hermano y elemento hermano

Hermanoes "hermano" y "hermana".

HermanoSon nodos que tienen el mismo padre (en el mismo childNodes de la lista).

Elemento hermanoSon elementos que tienen el mismo padre (en el mismo children de la lista).

Ejemplo

Ejemplo 1

Obtener los nodos hijos del elemento <body>:

const nodeList = document.body.childNodes;

Prueba personal

Ejemplo 2

Obtener el número de nodos hijos en "myDIV":

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

Prueba personal

Ejemplo 3

Cambiar el color de fondo del segundo nodo hijo:

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

Prueba personal

Ejemplo 4

Obtener el texto del tercer nodo hijo del elemento <select>:

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

Prueba personal

Sintaxis

element.childNodes

Valor devuelto

Tipo Descripción
Objeto

Colección de objetos NodeList de nodos.

Los nodos se ordenan según el orden en que aparecen en el documento.

Compatibilidad del navegador

element.childNodes es una característica de DOM Level 1 (1998).

Todos los navegadores lo admiten completamente:

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