Apa itu DOM tree dan tipenya

ByMukhlis MJ

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:

dom tree, mukhlis mj, javascript dom
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.

Similar Posts