DOM Manipulation

Dimas Rizki MahendraDimas Rizki Mahendra
4 min read

Table of contents

DOM (Document Object Model) adalah antarmuka pemrograman untuk dokumen web. DOM merepresentasikan halaman web dalam bentuk struktur pohon (tree structure), di mana setiap elemen pada halaman menjadi sebuah objek yang dapat dimanipulasi dengan JavaScript.

Ketika sebuah halaman web dimuat di browser, HTML-nya dikonversi menjadi DOM. Dengan DOM, JavaScript bisa:

  • Mengakses elemen HTML (misalnya <p>, <div>, <button>, dll.).

  • Mengubah konten, gaya (CSS), atau atribut dari elemen.

  • Menambahkan atau menghapus elemen.

  • Menanggapi event seperti klik atau input pengguna.

Struktur DOM

DOM terdiri dari beberapa bagian utama:

  1. Document – Merupakan akar dari seluruh dokumen, diakses dengan document.

  2. Element – Setiap tag HTML menjadi elemen di dalam DOM (<h1>, <p>, <div>, dll.).

  3. Attribute – Setiap elemen bisa memiliki atribut (seperti id, class, src, dll.).

  4. Text – Isi teks dalam elemen HTML.

Contoh DOM dari HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh DOM</title>
  </head>
  <body>
    <h1 id="judul">Halo, DOM!</h1>
    <p class="teks">Belajar DOM itu seru.</p>
  </body>
</html>

Akan direpresentasikan dalam DOM sebagai struktur pohon:

Document
 ├── html
 │    ├── head
 │    │    └── title → "Contoh DOM"
 │    └── body
 │         ├── h1 (id="judul") → "Halo, DOM!"
 │         └── p (class="teks") → "Belajar DOM itu seru."

Mengakses Elemen HTML

Untuk memanipulasi elemen HTML, kita perlu mengaksesnya terlebih dahulu. Ada beberapa metode yang sering digunakan, di antaranya:

getElementById

getElementById adalah metode bawaan JavaScript yang digunakan untuk memilih satu elemen berdasarkan atribut id.

let domJudul = document.getElementById("judul");
console.log(domJudul);

Penjelasan

  • document → Objek utama yang merepresentasikan halaman HTML.

  • getElementById("judul") → Mengambil elemen berdasarkan id yang diberikan.

Metode ini hanya mengembalikan satu elemen meskipun ada beberapa elemen dengan ID yang sama dalam HTML.

<h1 id="judul">Halo, DOM!</h1>

Apa yang terjadi jika ID tidak ada?

Jika getElementById dipanggil dengan ID yang tidak ada di dalam dokumen, maka akan mengembalikan null.

let elemen = document.getElementById("tidakAda");
console.log(elemen); // Output: null

Apa yang Terjadi Jika Ada ID yang Duplikat?

Secara spesifikasi HTML, ID harus unik. Tapi jika ada lebih dari satu elemen dengan ID yang sama, getElementById hanya mengembalikan elemen pertama yang ditemukan.

...
<h1 id="judul">Halo, DOM!</h1>
<h1 id="judul">Halo, DOM Lagi!</h1>
...

// Javascript
let domJudul = document.getElementById("judul");
console.log(domJudul);

getElementsByTagName

getElementsByTagName adalah metode JavaScript yang digunakan untuk mengambil semua elemen HTML dengan tag tertentu. Metode ini mengembalikan HTMLCollection, yaitu kumpulan elemen yang bisa diakses seperti array.

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

// Javascript 
let tagParagraph = document.getElementsByTagName("p");
console.log(tagParagraph);

Penjelasan

  • document → Objek utama untuk mengakses DOM.

  • getElementsByTagName("p") → Mengambil semua elemen dengan nama tag tertentu.

  • Mengembalikan HTMLCollection, yang mirip dengan array tetapi tidak memiliki metode array seperti map(), forEach(), dll.

getElementsByClassName

getElementsByClassName adalah metode JavaScript yang digunakan untuk mengambil sekumpulan elemen berdasarkan atribut class. Berbeda dengan getElementById yang hanya mengembalikan satu elemen, metode ini mengembalikan HTMLCollection yang berisi semua elemen dengan class yang sesuai.

...
<p class="test">Paragraph 1</p>
<p>Paragraph 2</p>
<p class="test">Paragraph 3</p>
...

// Javascript
let collectionOfTest = document.getElementsByClassName("test");
for (const element of collectionOfTest) {
    element.style.color = "red";
}
console.log(collectionOfTest);

Penjelasan

  • document → Objek utama untuk mengakses DOM.

  • getELementsByClassName("test") → Mengambil semua elemen dengan attribut kelas tertentu.

  • Mengembalikan HTMLCollection, yang mirip dengan array tetapi tidak memiliki metode array seperti map(), forEach(), dll.

  • Merubah warna setiap elemen yang memiliki kelas “test” menjadi warna merah

querySelector & querySelectorAll

querySelector dan querySelectorAll tidak hanya memilih elemen berdasarkan ID atau class, tetapi juga mendukung semua selector CSS. Ini membuatnya lebih fleksibel dibandingkan metode seperti getElementById, getElementsByClassName, atau getElementsByTagName.

Contoh Penggunaan querySelector

1. Memilih Elemen Berdasarkan ID

let element = document.querySelector("#judul");
element.style.color = "blue";

Sama seperti getElementById("judul"), tetapi lebih fleksibel karena mendukung selector CSS.

2. Memilih Elemen Berdasarkan Class

let item = document.querySelector(".test");
item.style.backgroundColor = "yellow";

Hanya elemen pertama yang memiliki class highlight yang akan dipilih.

3. Memilih Elemen Berdasarkan Tag

let firstParagraph = document.querySelector("p");
firstParagraph.innerText = "Paragraf pertama dipilih!";

Hanya paragraf pertama yang dipilih.

Contoh Penggunaan querySelectorAll

1. Memilih Semua Elemen dengan Class

let items = document.querySelectorAll(".highlight");

items.forEach(item => {
    item.style.backgroundColor = "yellow";
});

Berbeda dengan getElementsByClassName(), kita bisa langsung menggunakan forEach() karena querySelectorAll mengembalikan NodeList.

NodeList dan HTMLCollection

Ketika memilih beberapa elemen dalam DOM, JavaScript mengembalikan hasil dalam bentuk NodeList atau HTMLCollection.

NodeList

  • Kumpulan node (bisa elemen, teks, atau komentar).

  • Bisa diperoleh dari querySelectorAll().

  • Bisa bersifat statik (tidak berubah saat DOM berubah).

  • Bisa menggunakan forEach() tanpa konversi ke array.

HTMLCollection

  • Koleksi elemen HTML dari getElementsByClassName() atau getElementsByTagName().

  • Live, artinya otomatis diperbarui jika DOM berubah.

  • Tidak bisa langsung menggunakan forEach(), harus dikonversi ke array.

Kesimpulan

manipulasi DOM memungkinkan perubahan dinamis pada halaman web. Untuk memilih elemen:

  • querySelector digunakan untuk mengambil satu elemen pertama yang cocok.

  • querySelectorAll digunakan untuk mengambil semua elemen yang cocok dan bisa langsung digunakan dengan forEach().

  • getElementById digunakan untuk memilih elemen berdasarkan ID.

  • getElementsByClassName dan getElementsByTagName perlu dikonversi ke array sebelum digunakan dengan forEach().

  • NodeList lebih fleksibel dan mendukung forEach(), sedangkan HTMLCollection selalu memperbarui isinya secara otomatis.

0
Subscribe to my newsletter

Read articles from Dimas Rizki Mahendra directly inside your inbox. Subscribe to the newsletter, and don't miss out.

JavaScriptDOM

Written by

Dimas Rizki Mahendra
Dimas Rizki Mahendra

PHP Developer