5 - Accediendo a los nodos hijos de una marca HTML(childNodes)(FireFox)


El concepto de nodos hijo para un elemento es similar pero veremos que la cantidad de hijos que detecta un navegador y otro es distinto. Como es eso?

Si en FireFox si disponemos:
<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>

Y luego le preguntamos al div cuantos hijos tiene, este nos responderá 7 (siete), recordemos que con el Internet Explorer el resultado es 3 (tres).

FireFox crea el árbol de nodos de la siguiente manera:
<div id="bloque">
<p>Este es el primer párrafo</p>
Entre la marca <div id="bloque"> y la marca <p> hay un salto de línea (crea un nodo de texto, este es el primer nodo).
Luego el primer párrafo es el segundo nodo.
Entre el primer párrafo y el segundo hay otro salto de línea (este es el tercer nodo) y así sucesivamente. Si contamos los párrafos y saltos de línea podremos contabilizar los 7 hijos.
Si no dejamos el salto de línea entre una párrafo y otro y tampoco dejamos espacios después del div y antes del cerrado del div, los hijos serán 3.
Crearemos una página con dos div que contengan tres párrafos cada uno, en uno insertaremos saltos de línea entre párrafos y en otro los dispondremos todos en la misma línea y veremos la cantidad de hijos que tiene cada div:
pagina1.html
<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="bloque1">
<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>
<hr>
<div id="bloque1"><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>
funciones.js
function cambiarColores()
{
  var lista1=document.getElementById('bloque1');
  alert('La cantidad de hijos del primer div es:'+lista1.childNodes.length);
  var lista2=document.getElementById('bloque1');
  alert('La cantidad de hijos del segundo div es:'+lista2.childNodes.length);
}