4 - Accediendo a los nodos hijos de una marca HTML(childNodes)(solo Internet Explorer)

Veremos más adelante que hay diferencias de implementación en varias partes del DOM entre diferentes navegadores y es muy bueno conocerlas para cuando implementamos nuestros programas. Cada vez que aparezca una de estas diferencias las haremos notar dando un concepto para cada navegador.

Cada nodo tiene un solo nodo padre, pero puede tener muchos hijos.



En este ejemplo el nodo body tiene 4 hijos, la marca h1 tiene 1 hijo, lo mismo cada marca li tienen un hijo. Los nodos que no tienen descendientes son los nodos hoja.

El DOM provee a cada nodo de un vector que almacena la referencia a cada nodo hijo, la propiedad se llama: 

childNodes
Este vector almacena una referencia a cada nodo hijo.

El siguiente ejemplo muestra como acceder a cada hijo de una marca div que contiene tres párrafos. Al presionar un botón cambiaremos el color de cada párrafo accediendo a los mismos desde el nodo div a través de la propiedad childNodes. Mostramos finalmente la cantidad de hijos que tiene la marca div.

El archivo html es: 
<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="bloque">
<p>Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<input type="button" value="Cambiar colores" onClick="cambiarColores()">
</body>
</html>

El archivo javascript funciones.js es el siguiente: 
function cambiarColores()
{
  var lista=document.getElementById('bloque');
  lista.childNodes[0].style.color='#ff0000';
  lista.childNodes[1].style.color='#00ff00';
  lista.childNodes[2].style.color='#0000ff';
  alert('La cantidad de hijos del nodo div es:'+lista.childNodes.length);
}

Es importante notar que sólo definimos la propiedad id para la marca div, ya que teniendo la referencia de éste podemos acceder a los tres hijos (los tres párrafos).

Para obtener la referencia a la marca div hacemos como lo vimos en el concepto anterior: 
  var lista=document.getElementById('bloque');
Luego para acceder al primer párrafo: 
  lista.childNodes[0].style.color='#ff0000';
Es decir, indicamos la propiedad childNodes y entre corchetes qué elemento del vector accedemos. Se numeran las componentes a partir de cero. Si queremos saber cuántos elementos tiene el vector lo hacemos mediante la propiedad length de la propiedad childNodes: 
  alert('La cantidad de hijos del nodo div es:'+lista.childNodes.length);