JavaScript-те түйіндермен жұмыс

Сіз білетіндей, тегтер басқа тегтерді қамтуы мүмкін немесе JavaScript терминологиясында айтқанда, DOM элементтері басқа DOM элементтерін қамтуы мүмкін. Бұған қоса, алайда, оларда түсініктемелер және жай мәтін болуы мүмкін. Түсініктемелер, мәтіндер және DOM элементтері бір атаумен біріктіріледі - түйіндер.

Сізге firstElementChild, lastElementChild, nextElementSibling, previousElementSibling сипаттары таныс. Бұл сипаттар нақты DOM элементтерімен жұмыс істейді, және қалған түйіндерді елемейді. Әдетте, дәл сол бізге қажет болады.

Алайда, firstChild, lastChild, nextSibling, previousSibling сипаттары да бар. Бұл сипаттар ұқсас түрде жұмыс істейді, алайда, барлық түйіндерді есепке алады. Мысал арқылы осы сипаттардың арасындағы айырмашылықты қарастырайық. Бізде үш түйіні бар див бар делік:

<div id="elem">text<span>tag</span></div>

Осы дивге сілтемені айнымалыға алайық:

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

Енді firstChild және firstElementChild сипаттарында не бар екенін көрейік:

console.log(elem.firstChild);        // түсініктеме
console.log(elem.firstElementChild); // span тегі

lastChild және lastElementChild арасындағы айырмашылықты көрсететін код жазыңыз.

nextSibling және nextElementSibling арасындағы айырмашылықты көрсететін код жазыңыз.

previousSibling және previousElementSibling арасындағы айырмашылықты көрсететін код жазыңыз.