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).
<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);
}