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:

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

Dapatkan referensi ke div ini ke dalam variabel:

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

Dan sekarang mari kita lihat apa yang terkandung dalam properti firstChild dan firstElementChild:

javascriptconsole.log(elem.firstChild);        // komentar
console.log(elem.firstElementChild); // tag span