JavaScript-də qovşaq(lar)la iş

Bildiyiniz kimi, teqlər digər teqləri ehtiva edə bilər və ya JavaScript terminologiyasında desək, DOM elementləri digər DOM elementlərini ehtiva edə bilər. Bundan əlavə, onlarda şərhlər və adi mətn ola bilər. Şərhlər, mətnlər və DOM elementləri bir adla birləşdirilir - qovşaqlar.

Sizə artıq firstElementChild, lastElementChild, nextElementSibling, previousElementSibling xassələri tanışdır. Bu xassələr xüsusilə DOM elementləri ilə işləyir, qalan qovşaqlara məhəl qoymur. Bir qayda olaraq, bizə məhz bu lazım olur.

Lakin, firstChild, lastChild, nextSibling, previousSibling xassələri də mövcuddur. Bu xassələr oxşar şəkildə işləyir, lakin, bütün qovşaqları nəzərə alır. Gəlin bu xassələr arasındakı fərqi bir nümunə ilə görək. Tutaq ki, bizim içində üç qovşaq olan bir div-imiz var:

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

Gəlin bu div-ə dəyişəndə istinad əldə edək:

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

İndi gəlin firstChild və firstElementChild xassələrində nə olduğuna baxaq:

javascriptconsole.log(elem.firstChild);        // şərh
console.log(elem.firstElementChild); // span teqi
Задание 1

lastChild və lastElementChild arasındakı fərqi göstərən kodu yazın.

Задание 2

nextSibling və nextElementSibling arasındakı fərqi göstərən kodu yazın.

Задание 3

previousSibling və previousElementSibling arasındakı fərqi göstərən kodu yazın.