 |
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])
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é</li><li>Té</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é</li><li>Té</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>