DOM di Javascript

DOM singkatan dari Document Object Model. Document adalah bagian dari browser yang menampilkan halaman web pada layar perangkat, sedangkan Object di Javascript adalah tipe data yang  memungkinkan kita menyimpan kumpulan nilai dengan tipe data yang berbeda. Jadi, DOM adalah antarmuka pemrograman berbasis object yang mempresentasikan dokumen web.

Saat membuka halaman web pada browser, maka file HTML dari web akan dimuat serta ditampilkan pada layar perangkat. Pada saat proses render file HTML berlangsung, browser akan membuat DOM yang menggambarkan struktur halaman tersebut. 

DOM berisi kumpulan elemen HTML seperti <div>, <p>, dan <img> dan konten terkaitnya, misal teks, gambar, dan lain-lain. Jika kita coba ketik document pada console, maka yang akan tampil  object document yang berisi kode HTML dari struktur halaman web seperti berikut:


DOM dapat diilustrasikan dengan bentuk pohon (DOM Tree). Berikut adalah script HTML struktur halaman website yang akan kita ilustrasikan dalam bentuk DOM Tree: 

Script HTML diatas jika kita ilustrasikan dalam bentuk pohon (DOM Tree) seperti di bawah ini:

Pada DOM Tree di atas, document adalah root node, sedangkan <html> adalah parent node yang memiliki dua child node yaitu <head> dan <body>. Begitu seterusnya hingga sampai node yang terkecil. 

Untuk lebih jelasnya, berikut penjelasan dari struktur hierarki DOM:

  • Root node adalah node yang menjadi sumber dari semua node lain di dalam DOM, yaitu node document.
  • Parent node adalah node yang berada 1 tingkat diatas node yang lain. Pada DOM Tree diatas, <body> adalah parent dari <h1>, <p>, <p>, <div>, dan <a>.
  • Child node adalah node yang berada 1 tingkat dibawah node yang lain. Pada DOM Tree diatas, <h1> adalah child dari <body>.
Node-node pada DOM Tree diatas memiliki tipenya masing-masing seperti dibawah ini:
Pada DOM Tree diatas, terdapat 3 tipe node, yaitu node yang bertipe element seperti node <html>, <body>, dan <head>, node yang bertipe Attribute seperti href, dan ada juga node yang bertipe Text seperti "Hello World", "Paragraf 1", dan "Web Programming UNPAS".

Berikut ini adalah tipe-tipe node:
  • Elemen
  • Attribute
  • Text
  • CData Section
  • Entity Reference
  • Entity
  • Processing Instruction
  • Comment
  • Document
  • Document Type
  • Document Fragment
  • Notation

Nantinya, setiap node dapat diakses dan dimanipulasi oleh developer dengan bantuan JavaScript. Dengan kata lain, DOM membuat seluruh komponen dari halaman web seperti elemen HTML, atribut, text, dan lain-lain dapat diakses dan dimanipulasi.
 

NodeList Vs HTMLCollection

HTMLCollection hanya menyimpan node element, sedangkan NodeList tidak hanya menyimpan node element tetapi juga node attribut dan node text.

Untuk lebih jelasnya perhatikan gambar berikut:

Gambar 1: NodeList

Gambar 2: HTMLCollection

Persamaan dan perbedaan Nodelist dan HTMLCollection:
  • Keduanya merupakan kumpulan node
  • Struktur datanya mirip array
  • Nodelist dapat berisi node apapun, sedangkan HTMLCollection harus berisi elemen HTML
  • HTMLCollection berisi live sedangkan nodeList tidak

Mengkases Elemen Tertentu dengan DOM

DOM adalah model dari dokumen HTML yang berisi kumpulan fungsi dan atribut berupa objek dari elemen HTML yang dapat diilustrasikan dalam bentuk pohon seperti ini:

Struktur pohon ini akan memudahkan kita dalam menggunakan elemen tertentu. Berikut adalah script dari ilustrasi DOM Tree di atas:

Mari kita coba mengakses objek <head> dan <body> dari script diatas.

Coba ketik kode berikut pada console:

// mengakses objek head
document.head;

// mengakses objek body
document.body;
Hasilnya:



Saat kita ketik document.head maka hasilnya object yang berisi element <meta> dan <title> dan saat kita ketik document.body maka hasilnya object yang berisi element-element yang berada didalam element <body> seperti element <h1>, <p>, <div>, dan konten terkaitnya.

Jika kita ingin mengakses elemen yang spesifik, terdapat beberapa fungsi yang bisa digunakan:
  • getElementById() fungsi untuk memilih elemen berdasarkan atribut id.
  • getElementByName() fungsi untuk memilih elemen berdasarkan atribut name.
  • getElementByClassName() fungsi untuk memilih elemen berdasarkan atribut class.
  • getElementByTagName() fungsi untuk memilih elemen berdasarkan nama tag.
  • getElementByTagNameNS() fungsi untuk memilih elemen berdasarkan nama tag.
  • querySelector() fungsi untuk memilih elemen berdasarkan query.
  • querySelectorAll() fungsi untuk memilih elemen berdasarkan query.
  • dan lain-lain.

Fungsi-fungsi di atas cukup sering digunakan untuk mengakses elemen tertentu.

Contoh penggunaan: document.getElementById()

Misalkan kita punya kode HTML seperti ini:

Kemudian kita ingin memberikan style pada element <h1> berikut:

Caranya, kita perlu mengakses element tersebut di Javascript. Kita bisa gunakan fungsi getElementById() karena element tersebut memiliki id dengan nama judul. 

Setelah itu kita bisa memanipulasi element tersebut, misalnya kita akan memberikan style warna teks menjadi kuning dan warna background menjadi abu-abu seperti berikut:


Hasilnya sebagai berikut:

Kita juga bisa mengganti text "Hello World" menjadi misalkan "Hello Javascript" dengan menambahkan kode dibawah ini pada script Javascript diatas:

Hasilnya tulisan Hello World berubah menjadi Hello Javascript seperti berikut:


Contoh penggunaan: document.getElementsByTagName()

Misalkan kita punya kode HTML seperti ini:

Pada kode HTML di atas, kita akan menyeleksi element-element <p> dan memberikan style background warna light blue. Caranya seperti berikut:


Hasilnya seperti berikut:

Pada kode di atas, kita akan mengakses semua element <p> yang ada di script HTML, kemudian kita memberikan style warna background 'lightblue' pada element <p> dengan index ke-0 dan index ke-1, sehingga kedua element tersebut backgroundnya menjadi berwarna 'lightblue'.

Kenapa kita mengaksesnya menggunakan index? karena fungsi document.getElementsByTagName() akan mengakses HTML Collection atau beberapa element sekaligus, tiap element tersebut memiliki index array karena jika console setelah kita akses menggunakan fungsi document.getElementsByTagName() hasilnya berupa object HTML Collection dalam bentuk array seperti berikut:

Caranya ketik P lalu enter, maka hasilnya:


Kita bisa lihat, fungsi document.getElementsByTagName() menghasilkan HTML Collection dalam bentuk array yang didalamnya berisi element <p> sebanyak 4 seperti yang didalam script HTML yang masing-masing element memiliki index yang dimulai dari 0.

Yang perlu diperhatikan adalah jika kita tidak menggunakan index dari elementnya, maka secara default yang akan kita manipulasi adalah element dengan index ke-0.

Selanjutnya, kita juga bisa menuliskan kode javascript di atas dengan menggunakan pengulangan for seperti berikut:

Pada kode di atas, kita memanipulasi element-element <p> menggunakan pengulangan for dengan memberi background warna lightblue pada semua element <p>.

Contoh lain dari penggunaan fungsi document.getElementsByTagName(), kita bisa menuliskan indexnya seperti berikut:

Dilanjut lagi nanti.

Referensi:
https://www.domainesia.com/berita/apa-itu-dom-di-javascript/
https://www.petanikode.com/javascript-dom/
https://www.w3schools.com/js/js_htmldom.asp