Apa itu DOM tree dan tipenya

Posted by Mukhlis MJ 1/20/2025 Post a Comment

DOM Tree

DOM Tree adalah representasi elemen-element HTML didalam browser kita, dan representasinya dalam bentuk Tree (Pohon).

Contohnya:

HTML


  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>Hello World</h1>
    <p>Paragraf 1</p>
    <p>Paragraf 2</p>
    
    <div>
        <p>Paragraf 3</p>
    </div>
    <a href="halaman2.html">Ke halaman 2</a>

</body>
</html>

Nah, struktur HTML sederhana ini kalau di representasinkan dalam bentuk DOM Tree maka lebih kurang hasilnya nanti seperti ini:

Ilustrasi DOM Tree

dimana seluruh elementnya kita anggap sebagai sebuah "Node" atau simpul. Simpul paling atas kita sebut dengan simpul "Root/ document" meskipun diatasnya ada element lain, namun itu kita abaikan saja dulu.

Setelah element document kemudian ada element terluarnya yaitu "<html>" dan dimana didalamnya ada 2 element lagi "<head>" dan "<body>" dan seterusnya, bisa teman-teman lihat sendiri digambar yang ada diatas.

Type pada DOM Tree

Tiap-tiap simpul/Node itu memiliki type, jadi node pada DOM Tree itu banyak typenya. lebih jelasnya teman-teman coba perhatikan gambar ilustrasi dibawah ini.

type dom tree, javascrip dom, mukhlis mj

Type Node pada DOM Tree

yang tulisannya Bold adalah typenya. Jadi kalau kita lihat untuk semua emelent html itu typenya Element dan untuk tulisan yang ada didalam element html contohnya seperti "Hello World" itu kita sebutnya "Text".

Tipe-tipe Node

Sebenarnya ada banyak sekali tipe-tipe node yang ada didalam DOM Tree itu sendiri diantaranya kalau teman-teman pengen tau adalah sebagai berikut:

Elemen
Attribute
Text
CData Section
Entity Reference
Entity
Processing Instruction
Comment
Document
Document Fragment
Notation

Namun diawal-awal kita cukup fokus di tiga node ini saja sebagai pembelajaran kita, diantaranya:

Elemen
Text, dan
Document

NodeList vs. HTMLColection

apa yang dimaksud dengan ke 2 hal ini?

kita balik dulu ke gambar Dom Tree yang diatas tadi. misalnya kalau kita ambil 1 element HTML <h1> misalnya, maka ini kita sebut sebagai "Node".

Jika kita memilih lebih dari satu "Node" misalnya ada <h1>,<p>,"hello world" dengan tipenya "Text", dll maka ini kita sebut seabagai "NodeList" tanpa peduli tipe nodenya apa.

sedangkan HTMLColection itu adalah kumpulan node tapi kusus yang tipenya "Element HTML" saja.

ini penting karena ini menentukan bagaimana nanti cara kita mengelolanya, karena cara mengelolanya sedikit berbeda.

Sekarang coba kita lihat penjelasan detail dari NodeList vs. HTMLColection

Keduanya merupakan Kumpulan node
Strukturnya datanya mirip array
nodeList dapat berisi node apapun, sedangkan HTMLColection harus berisi elemen HTML
HTMLColection bersifat live sedangkan nodeList tidak ( ini sangat penting nanti ketika kita belajar mengenai manipulasi DOM )

Struktur Hierarki DOM Tree

ini juga cukup penting karena semua node yang ada didalam DOM Tree itu saling terhubung. jadi kita harus paham betul mengenai hubungan atau relasi antara DOM tersebut, supaya ketika nanti ketika kita masuk ke topik penelusuran DOM itu kita tidak kebingunagan lagi bagaimana cara menelusurinya.

Struktur Hierarki DOM Tree ini mirip sekali dengan silsilah kebluarga. seperti parent dan child begitu.

Struktur Hierarki DOM

Root Node

node yang menjadi sumber dari semua node lain didalm DOM
document

Parent Node

node yang berada 1 tingkat diatas node yang lain
body adalah parent dari h1, p, p, div dan a

Child Node

node yang berada 1 tingkat dibawah node yang lain
h1 adalah child dari body

nah inilah konsep yang harus kita pahami terlebih dahulu sebelum teman-teman masuk ke materi yang lebih jauh mengenai javascript DOM.

semua materi diatas berasal dari channelnya pak sandika galih.