Trabalhando com nós em JavaScript
Como você sabe, as tags podem conter outras tags ou, em termos de JavaScript, elementos DOM podem conter outros elementos DOM. Além disso, porém, eles podem conter comentários e texto comum. Comentários, textos e elementos DOM são unidos por um nome - nós.
Você já está familiarizado com as propriedades firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Essas propriedades funcionam exatamente com elementos DOM,
ignorando os outros nós. Normalmente, é exatamente
o que precisamos.
No entanto, também existem as propriedades firstChild,
lastChild, nextSibling, previousSibling.
Essas propriedades funcionam de maneira análoga,
no entanto, considerando todos os nós. Vamos ver
a diferença entre essas propriedades com um exemplo.
Suponha que temos uma div contendo três nós:
<div id="elem"><!--com-->text<span>tag</span></div>
Vamos obter uma referência a esta div em uma variável:
let elem = document.querySelector('#elem');
E agora vamos ver o que está contido
nas propriedades firstChild e firstElementChild:
console.log(elem.firstChild); // comentário
console.log(elem.firstElementChild); // tag span
Escreva um código que mostre a diferença entre
lastChild e lastElementChild.
Escreva um código que mostre a diferença entre
nextSibling e nextElementSibling.
Escreva um código que mostre a diferença entre
previousSibling e previousElementSibling.
