Pengendalian Nod dalam JavaScript
Seperti yang anda ketahui, tag boleh mengandungi tag lain atau, dalam istilah JavaScript, elemen DOM boleh mengandungi elemen DOM lain. Selain itu, bagaimanapun, ia mungkin mengandungi komen dan teks biasa. Komen, teks dan elemen DOM digabungkan dengan satu nama - nod.
Anda sudah biasa dengan sifat-sifat firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Sifat-sifat ini berfungsi tepat dengan elemen DOM,
mengabaikan nod lain. Biasanya, inilah
yang kita perlukan.
Walau bagaimanapun, terdapat juga sifat-sifat firstChild,
lastChild, nextSibling, previousSibling.
Sifat-sifat ini berfungsi dengan cara yang serupa,
walau bagaimanapun, mengambil kira semua nod. Mari kita lihat
perbezaan antara sifat-sifat ini dengan contoh.
Katakan kita mempunyai div, yang mengandungi tiga nod di dalamnya:
<div id="elem"><!--com-->text<span>tag</span></div>
Dapatkan pautan ke div ini dalam pembolehubah:
let elem = document.querySelector('#elem');
Dan sekarang mari kita lihat apa yang terkandung
dalam sifat-sifat firstChild dan firstElementChild:
console.log(elem.firstChild); // komen
console.log(elem.firstElementChild); // tag span
Tulis kod yang akan menunjukkan perbezaan antara
lastChild dan lastElementChild.
Tulis kod yang akan menunjukkan perbezaan antara
nextSibling dan nextElementSibling.
Tulis kod yang akan menunjukkan perbezaan antara
previousSibling dan previousElementSibling.
