javascript DOM : DOM tree

javascript DOM : DOM tree

Di artikel ini kita akan bahas lengkap mengenai pohon hirarki atau DOM tree

Jadi yang kalian ketahui sebelum nya dom tree ITU adalah repentasi elemen elemen html dalam browser/document kalian dan repentasi nya dalam bentuk tree atau pohon

Contoh element di html



Jika kita repentasikan kedalam dom tree maka menjadi seperti ini



Seluruh elemennya itu nanti kita anggap sebagai node atau simpul

Simpul paling atas ITU kita sebut simpul root atau document sebetulnya di atas document ini masih ada yang lain seperti window dll cuma yang kita fokuskan untuk dibahas hanya document

Tiap tiap simpul ini/tiap tiap node, ini memiliki tipe dan tipe nya ada banyak contohnya:



Sebenarnya tipe dalam node ITU ada banyak 

Tipe tipe node

•element

•attribute

•text

•cdata section

•entity reference

•entity

•processing intruction

•comment 

•document

•document tipe

•document fragment

•notation

Selanjutnya ada 2 istilah yang harus kalian pahami yaitu mengenai nodelist dan html collection 



Jika kita memilih satu dari simbul ini kita menyebutnya node ,selagi memilihnya satu. Nanti tergantung jenis node apa yang di pilih kalau p berarti dia element tipenya.



Jika kita memilih lebih dari satu node ITU kita sebut dengan nodelist, tidak peduli tipe node nya apa.



Sedangkan html collection ITU adalah sekumpulan node tapi khusus yang tipe nya element html saja

NodeList vs HtmlCollection

•keduanya Merupakan sekumpulan node 

•struktur datanya mirip array

•nodelist dapat berisi node apapun, sedangkan HtmlCollection harus berisi element html

•htmlcollection bersifat live sedangkan NodeList tidak

Struktur hierarki dom tree



Strukturnya seperti ini

•root node

Node yang menjadi sumber dari semua node lain di dalam dom, dalam foto ini root node nya adalah document

•parent node

node yang berada satu tingkat diatas node yang lain dalam foto di atas body adalah parent dari h1,p,p,div dan a

•child node

Node yang berada satu tingkat dibawah node yang lain dalam foto di atas h1 adalah child dari body

Masih banyak lagi sebenernya tentang struktur dom tree seperti konsep children dan masih banyak lagi.

Ok mungkin sekian penjelasan tentang dom tree