Trabajo con nodos en JavaScript
Como sabes, las etiquetas pueden contener otras etiquetas o, en términos de JavaScript, los elementos DOM pueden contener otros elementos DOM. Además de esto, sin embargo, pueden tener comentarios y texto simple. Los comentarios, textos y elementos DOM se unen bajo un nombre: nodos.
Ya estás familiarizado con las propiedades firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Estas propiedades funcionan precisamente con elementos DOM,
ignorando otros nodos. Por regla general, eso es
exactamente lo que necesitamos.
Sin embargo, también existen las propiedades firstChild,
lastChild, nextSibling, previousSibling.
Estas propiedades funcionan de manera similar,
pero teniendo en cuenta todos los nodos. Veamos la
diferencia entre estas propiedades con un ejemplo.
Supongamos que tenemos un div que contiene tres nodos:
<div id="elem"><!--com-->text<span>tag</span></div>
Obtengamos una referencia a este div en una variable:
let elem = document.querySelector('#elem');
Y ahora veamos qué contienen
las propiedades firstChild y firstElementChild:
console.log(elem.firstChild); // comentario
console.log(elem.firstElementChild); // etiqueta span
Escriba un código que muestre la diferencia entre
lastChild y lastElementChild.
Escriba un código que muestre la diferencia entre
nextSibling y nextElementSibling.
Escriba un código que muestre la diferencia entre
previousSibling y previousElementSibling.
