8 - Otras formas de acceder a los nodos hijos (firstChild - lastChild)


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

Retornar