9 - 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 y luego cambiaremos el color del primer y último párrafo (Para hacerlo compatible entre IExplorer y FireFox dispondremos todos los párrafos en la misma línea, lo mismo que el comienzo y fin del div)

pagina1.html 
<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</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="Modificar color del primer y último 
párrafo" onClick="accederParrafos()">
</body>
</html>
funciones.js 
function accederParrafos()
{
  var puntero=document.getElementById('parrafos');
  puntero.firstChild.style.color='#ff0000';
  puntero.lastChild.style.color='#ff0000';
}
Primero obtenemos la referencia al div: 
  var puntero=document.getElementById('parrafos');
Luego con esta referencia y a través de la propiedad firstChild accedemos a la propiedad style del nodo hijo y modificamos el valor del color: 
  puntero.firstChild.style.color='#ff0000';
De modo similar obtenemos la referencia al último nodo hijo del div: 
  puntero.lastChild.style.color='#ff0000';