Работа с възли в JavaScript

Както знаете, таговете могат да съдържат други тагове или, казано с термините на JavaScript, DOM елементите могат да съдържат други DOM елементи. Освен това обаче, в тях може да има коментари и обикновен текст. Коментарите, текстовете и DOM елементите се обединяват под едно название - възли.

Вече ви са познати свойствата firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Тези свойства работят именно с DOM елементи, игнорирайки останалите възли. По правило, именно това ни е необходимо.

Въпреки това, съществуват и свойства firstChild, lastChild, nextSibling, previousSibling. Тези свойства работят по аналогичен начин, обаче, взимайки предвид всички възли. Нека да видим разликата между тези свойства с пример. Нека имаме див, съдържащ в себе си три възела:

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

Нека получим препратка към този див в променлива:

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

А сега нека да видим какво се съдържа в свойствата firstChild и firstElementChild:

javascriptconsole.log(elem.firstChild);        // коментар
console.log(elem.firstElementChild); // таг span