Habiamos visto anteriormente que podemos acceder a todos los hijos de un nodo por medio del vector childNodes. Otra forma de acceder al primer y último nodo hijo es por medio de las propiedades firstChild (retorna la referencia del primer hijo, es lo mismo que poner obj.childNodes[0]) y obj.lastChild (retorna la referencia del último hijo, es sinónimo de poner obj.childNodes[obj.childNodes.length-1])
Veamos con un ejemplo como utilizar estas dos propiedades, dispondremos tres párrafos dentro de un div. Acceder al primer hijo del div y luego avanzando con el método nextSibling llegar hasta el final de la lista de hermanos, mostrar el texto de cada párrafo.
pagina.html
<!DOCTYPE html> <html> <head> <title>Problema</title> <script src="funciones.js"></script> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="parrafos"> <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="accediendo a los tres párrafos" onClick="proximoParrafo()"> </body> </html>
funciones.js
function proximoParrafo() { var puntero1=document.getElementById('parrafos'); var puntero2=puntero1.firstChild; while (puntero2!=null) { if (puntero2.nodeType==Node.ELEMENT_NODE) alert(puntero2.childNodes[0].nodeValue); puntero2=puntero2.nextSibling; } }
Primero obtenemos la referencia al div:
var puntero1=document.getElementById('parrafos');
Seguidamente obtenemos la referencia al primer nodo hijo del div:
var puntero2=puntero1.firstChild;
Mediante una estructura repetitiva avanzamos por cada nodo hermano y aquellos que son de tipo elemento procedemos a obtener la referencia del nodo hijo que es de tipo texto:
while (puntero2!=null) { if (puntero2.nodeType==Node.ELEMENT_NODE) alert(puntero2.childNodes[0].nodeValue); puntero2=puntero2.nextSibling; }