JavaScript'те түйүндөр менен иштөө

Билгендей, тегдер башка тегдерди камтый алышат, же JavaScript терминдеринде айтканда, DOM элементтери башка DOM элементтерин камтый алышат. Бул үстүнө, бирок, аларда комментарийлер жана кадимки текст болушу мүмкүн. Комментарийлер, тексттер жана DOM элементтери бир аталыш менен биригет - түйүндөр.

Сизге тааныш болгон касиеттер firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Бул касиеттер так DOM элементтери менен иштейт, калган түйүндөрдү эсепке албай. Адатта, так ушуну керегибиз болот.

Бирок, ошондой эле firstChild, lastChild, nextSibling, previousSibling касиеттери бар. Бул касиеттер окшош жол менен иштейт, бирок, бардык түйүндөрдү эске алат. Келгиле бул касиеттердин ортосундагы айырмачылыкты мисал аркылуу көрөлү. Бизде үч түйүндү камтыган див бар болсун:

<div id="elem">текст<span>тег</span></div>

Бул дивге шилтемени өзгөрмөгө алган кылалы:

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

Эми карап көрөлү, firstChild жана firstElementChild касиеттеринде эмне бар:

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

lastChild жана lastElementChild ортосундагы айырмачылыкты көрсөтүүчү код жазыңыз.

nextSibling жана nextElementSibling ортосундагы айырмачылыкты көрсөтүүчү код жазыңыз.

previousSibling жана previousElementSibling ортосундагы айырмачылыкты көрсөтүүчү код жазыңыз.