Bekerja dengan Node di JavaScript
Seperti yang Anda ketahui, tag dapat berisi tag lainnya atau, dalam istilah JavaScript, elemen DOM dapat berisi elemen DOM lainnya. Selain itu, namun, di dalamnya bisa terdapat komentar dan teks biasa. Komentar, teks, dan elemen DOM disatukan dengan satu nama - node.
Anda sudah familiar dengan properti firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Properti-properti ini bekerja khusus dengan elemen DOM,
mengabaikan node lainnya. Biasanya, inilah
yang kita butuhkan.
Namun, ada juga properti firstChild,
lastChild, nextSibling, previousSibling.
Properti-properti ini bekerja dengan cara yang serupa,
namun, mempertimbangkan semua node. Mari kita lihat
perbedaan antara properti-properti ini dengan contoh.
Misalkan kita memiliki div yang berisi tiga node:
<div id="elem"><!--com-->text<span>tag</span></div>
Dapatkan referensi ke div ini ke dalam variabel:
let elem = document.querySelector('#elem');
Dan sekarang mari kita lihat apa yang terkandung
dalam properti firstChild dan firstElementChild:
console.log(elem.firstChild); // komentar
console.log(elem.firstElementChild); // tag span
Tulis kode yang akan menunjukkan perbedaan antara
lastChild dan lastElementChild.
Tulis kode yang akan menunjukkan perbedaan antara
nextSibling dan nextElementSibling.
Tulis kode yang akan menunjukkan perbedaan antara
previousSibling dan previousElementSibling.
