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:

html<div id="elem"><!--com-->text<span>tag</span></div>

Vamos obter uma referência a esta div em uma variável:

javascriptlet elem = document.querySelector('#elem');

E agora vamos ver o que está contido nas propriedades firstChild e firstElementChild:

javascriptconsole.log(elem.firstChild);        // comentário
console.log(elem.firstElementChild); // tag span