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

La propiedad de solo lectura firstChild devuelve el primer hijo del nodo en el árbol, o nulo si el nodo no tiene hijos. Si el nodo es un documento, devuelve el primer nodo en la lista de sus hijos directos. La propiedad de sólo lectura lastChild devuelve el último hijo del nodo.

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])

Propiedad firstChild

La propiedad firstChild devuelve el primer nodo secundario del nodo especificado, como un objeto Node.
La diferencia entre esta propiedad y firstElementChild, es que firstChild devuelve el primer nodo hijo como un nodo de elemento, un nodo de texto o un nodo de comentario (dependiendo de cuál sea el primero), mientras que firstElementChild devuelve el primer nodo hijo como un nodo de elemento (ignora el texto y comentar nodos).

Nota: Los espacios en blanco dentro de los elementos se consideran texto y el texto se considera nodos .Esta propiedad es de sólo lectura.
Consejo: utilice la propiedad element.childNodes para devolver cualquier nodo hijo de un nodo especificado. childNodes [0] producirá el mismo resultado que firstChild. Para devolver el último nodo secundario de un nodo especificado, use la propiedad lastChild.

<!DOCTYPE html>
<html>
<body>
<p>Ejemplo </p>
<ul id="myList"><li>Caf&eacute</li><li>T&eacute</li><li>Agua</li><li>Jugo</li></ul>
<p>Haga click en el botón para obtener el contenido HTML del último nodo secundario de la lista..</p>
<button onclick="myFunction()">Probar</button>
<p><strong>Note:</strong> Los espacios en blanco dentro de los elementos se consideran texto y el texto se considera nodos.</p>
<p>Si agrega espacios en blanco antes del elemento UL de cierre, el resultado será "indefinido"..</p>

<p id="demo"></p>
<script>
function myFunction() {
  var list = document.getElementById("myList").lastChild.innerHTML;
  document.getElementById("demo").innerHTML = list;
}
</script>
</body>
</html>


Propiedad lastChild

La propiedad lastChild devuelve el último nodo secundario del nodo especificado, como un objeto Node.
La diferencia entre esta propiedad y lastElementChild, es que lastChild devuelve el último nodo hijo como un nodo de elemento, un nodo de texto o un nodo de comentario (dependiendo de cuál sea el último), mientras que lastElementChild devuelve el último nodo hijo como un nodo de elemento (ignora el texto y comentar nodos).

Nota: Los espacios en blanco dentro de los elementos se consideran texto y el texto se considera nodos . Esta propiedad es de sólo lectura.
Consejo: Utilice la propiedad element.childNodes para devolver cualquier nodo hijo de un nodo especificado. Para devolver el primer nodo secundario de un nodo especificado, use la propiedad firstChild.

<!DOCTYPE html>
<html>
<body>
<p>Ejemplo </p>
<ul id="myList"><li>Caf&eacute</li><li>T&eacute</li><li>Agua</li><li>Jugo</li></ul>
<p>Haga click en el botón para obtener el contenido HTML del último nodo secundario de la lista..</p>
<button onclick="myFunction()">Probar</button>
<p><strong>Note:</strong> Los espacios en blanco dentro de los elementos se consideran texto y el texto se considera nodos.</p>
<p>Si agrega espacios en blanco antes del elemento UL de cierre, el resultado será "indefinido"..</p>
<p id="demo"></p>
<script>
function myFunction() {
  var list = document.getElementById("myList").lastChild.innerHTML;
  document.getElementById("demo").innerHTML = list;
}
</script>
</body>
</html>