Los últimos tutoriales de desarrollo web
 

HTML DOM children Propery

<Elemento de objeto

Ejemplo

Obtener una colección de la <body> hijos de los elementos:

var c = document.body.children;
Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

La propiedad hijos devuelve una colección de elementos secundarios de un elemento, como un objeto HTMLCollection.

Los elementos de la colección están ordenados como aparecen en el código fuente y se puede acceder a los números de índice. El índice comienza en 0.

Consejo: Puede utilizar la propiedad length del objeto HTMLCollection para determinar el número de elementos secundarios, entonces se puede recorrer todos los niños y extraer la información que desee.

La diferencia entre esta propiedad y childNodes , es que childNodes contienen todos los nodos, incluyendo nodos de texto y nodos de comentario, mientras que los niños sólo contienen nodos de elemento.

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Propiedad
children 2.0 9,0 * 3.5 4.0 10.0

* Nota: La propiedad es totalmente compatible con los niños en IE6 a IE8. Sin embargo, en estas versiones, devuelve los nodos de elementos y nodos de comentario. IE9 + devuelve sólo nodos de elemento.

Sintaxis

element .children

Detalles técnicos

Valor de retorno: Un objeto HTMLCollection vivo, que representa una colección de nodos de elemento. Los elementos de la colección devuelta se clasifican como aparecen en el código fuente
Versión DOM Nivel básico 1 Elemento de objetos
Ejemplos

Más ejemplos

Ejemplo

Averiguar cuántos niños un <div> elemento tiene:

var c = document.getElementById("myDIV").children.length;

El resultado de c será:

2
Inténtalo tú mismo "

Ejemplo

Cambiar el color de fondo del segundo elemento hijo de un <div> elemento:

var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";
Inténtalo tú mismo "

Ejemplo

Obtener el texto del tercer elemento secundario (index 2) de un <select> elemento:

var c = document.getElementById("mySelect").children[2].text;

El resultado de c será:

Saab
Inténtalo tú mismo "

Ejemplo

Bucle a través de todos los niños de <body> y cambiar su color de fondo a rojo:

var c = document.body.children;
var i;
for (i = 0; i < c.length; i++) {
    c[i].style.backgroundColor = "red";
}
Inténtalo tú mismo "

Páginas relacionadas

Referencia HTML DOM: childNodes Property

<Elemento de objeto