Apa Itu DOM dan Manipulasi DOM

jeditor

11 bulan ago

Belajar Pemrograman JavaScript dari Nol #4

Apa itu DOM? Bagi yang baru belajar JavaScript, istilah ini mungkin terdengar asing. Singkatnya, DOM (Document Object Model) adalah representasi struktur halaman web yang memungkinkan JavaScript berinteraksi dengan elemen HTML. Bayangkan DOM seperti peta yang memetakan setiap komponen website—mulai dari teks, gambar, hingga tombol—sehingga kita bisa memanipulasinya secara dinamis. Tanpa DOM, web akan statis dan kurang interaktif. Di artikel ini, kita akan bahas dasar-dasar DOM, cara kerjanya, dan bagaimana memanfaatkannya untuk membuat website lebih responsif. Yuk, simak selengkapnya!

Pengertian DOM dalam JavaScript

DOM (Document Object Model) adalah representasi hierarkis dari struktur dokumen HTML yang memungkinkan JavaScript mengakses dan memanipulasi konten, struktur, dan gaya sebuah halaman web. Ketika browser memuat HTML, ia membuat pohon objek (tree-like structure) yang mencerminkan elemen-elemen seperti <div>, <p>, atau <button>. JavaScript bisa mengubah, menambah, atau menghapus elemen ini secara dinamis.

Menurut MDN Web Docs, DOM adalah antarmuka pemrograman untuk dokumen web—bukan bahasa, melainkan cara browser mengorganisir elemen agar bisa diubah dengan script.

Contoh sederhana:

// Mengambil elemen dengan ID "demo"
const element = document.getElementById("demo");
// Mengubah teks di dalamnya
element.textContent = "Halo, DOM!";

DOM bukan bagian dari JavaScript itu sendiri, melainkan standar yang diimplementasikan browser. Setiap elemen HTML menjadi “node” dalam pohon DOM, dan kita bisa menjelajahinya (misal: parentNode, childNodes).

Contoh manipulasi properti CSS:

const box = document.querySelector(".box");
box.style.backgroundColor = "blue"; // Mengubah warna latar

Tanpa DOM, web hanya berupa dokumen statis. Dengan DOM, kita bisa membuat interaksi seperti form validasi, animasi, atau pembaruan konten tanpa reload halaman.

Fungsi DOM pada Pengembangan Web

DOM (Document Object Model) adalah tulang punggung interaktivitas web. Tanpanya, website hanya akan menjadi dokumen statis tanpa respons terhadap input pengguna. Fungsi utamanya meliputi:

Mengakses Elemen: JavaScript bisa “menyentuh” elemen HTML menggunakan metode seperti getElementById, querySelector, atau getElementsByClassName. Contoh:
```
const button = document.querySelector("#submit-btn");
```
Memodifikasi Konten: Mengubah teks, HTML, atau atribut secara dinamis. Misal, update nilai input:
Mengubah Gaya CSS: Menyesuaikan tampilan berdasarkan interaksi. Contoh toggle class:
Event Handling: Menanggapi klik, scroll, atau input pengguna. Dari MDN:
Manipulasi Struktur: Menambah/menghapus elemen. Misal, membuat elemen baru:

document.getElementById("username").value = "User123";

const menu = document.querySelector(".menu");
menu.classList.toggle("active");

button.addEventListener("click", () => {
	alert("Tombol diklik!");
});

const newElement = document.createElement("div");
document.body.appendChild(newElement);

DOM juga memungkinkan AJAX (fetch data tanpa reload) dan Single Page Applications (SPA). Contoh:

fetch("data.json")
	.then(response => response.json())
	.then(data => {
		document.getElementById("content").innerHTML = data.text;
	});

Dengan DOM, web menjadi platform dinamis yang responsif terhadap pengguna.

Cara Mengakses Elemen DOM

Mengakses elemen DOM adalah langkah pertama untuk manipulasi konten web. JavaScript menyediakan beberapa metode utama:

getElementById: Mengambil elemen berdasarkan ID. Cepat dan spesifik.
```
const header = document.getElementById("header");
```
querySelector & querySelectorAll: Fleksibel dengan sintaks CSS selector. querySelector mengembalikan elemen pertama yang cocok, sementara querySelectorAll mengembalikan NodeList.
getElementsByClassName: Mengambil koleksi elemen dengan class tertentu.
getElementsByTagName: Mengakses elemen berdasarkan tag HTML (misal: semua <li>).
Traversing DOM: Navigasi relatif dari elemen yang sudah diakses. Contoh dari MDN:

const button = document.querySelector(".btn-primary");
const allImages = document.querySelectorAll("img");

const cards = document.getElementsByClassName("card");

const listItems = document.getElementsByTagName("li");

const parent = document.querySelector(".parent");
const firstChild = parent.firstElementChild;
const nextSibling = firstChild.nextElementSibling;

Perbedaan Koleksi vs NodeList:

getElementsByClassName dan getElementsByTagName mengembalikan HTMLCollection (live).
querySelectorAll mengembalikan NodeList (static).

Contoh konversi NodeList ke Array untuk menggunakan map/forEach:

const buttons = [...document.querySelectorAll(".btn")];
buttons.forEach(btn => btn.style.color = "red");

Pilih metode berdasarkan kebutuhan: kecepatan (getElementById) atau fleksibilitas (querySelector).

Manipulasi DOM dengan JavaScript

Setelah mengakses elemen DOM, kita bisa memanipulasinya untuk membuat web yang dinamis. Berikut cara umumnya:

1. Mengubah Konten

textContent: Mengubah teks biasa.
innerHTML: Memodifikasi HTML (hati-hati dengan XSS!).

const div = document.querySelector("#content");
div.textContent = "Teks baru"; // Aman
div.innerHTML = "<strong>HTML</strong> di sini"; // Risiko XSS

2. Mengubah Atribut

Gunakan setAttribute atau properti langsung:

const link = document.querySelector("a");
link.href = "https://example.com"; // Properti
link.setAttribute("target", "_blank"); // Metode

3. Modifikasi CSS

Akses properti melalui style:

const box = document.querySelector(".box");
box.style.backgroundColor = "#f00";
box.style.padding = "10px";

4. Menambah/Menghapus Elemen

createElement, appendChild, remove:

const newButton = document.createElement("button");
newButton.textContent = "Klik Saya";
document.body.appendChild(newButton);
newButton.remove(); // Hapus elemen

5. Toggle Class

Untuk animasi atau perubahan gaya:

const menu = document.querySelector(".menu");
menu.classList.add("active"); // Tambah class
menu.classList.toggle("hidden"); // Switch

Contoh Praktis:

// Ubah semua gambar menjadi grayscale
document.querySelectorAll("img").forEach(img => {
	img.style.filter = "grayscale(100%)";
});

Referensi: MDN DOM Manipulation.

Manipulasi DOM adalah inti dari web interaktif—mulai dari form dinamis hingga single-page apps.

Contoh Praktik Manipulasi DOM

Berikut beberapa contoh nyata manipulasi DOM yang sering digunakan di proyek web:

1. Toggle Dark Mode

Mengubah tema dengan menambahkan class CSS:

const toggleBtn = document.getElementById("dark-mode-toggle");
toggleBtn.addEventListener("click", () => {
	document.body.classList.toggle("dark-theme");
});

2. Dynamic Form Validation

Menampilkan pesan error real-time:

const emailInput = document.getElementById("email");
emailInput.addEventListener("input", () => {
	const errorText = document.querySelector(".error-email");
	errorText.textContent = emailInput.validity.valid ? "" : "Email tidak valid!";
});

3. Infinite Scroll

Memuat konten tambahan saat scroll (contoh sederhana):

window.addEventListener("scroll", () => {
	if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
		fetchMoreContent(); // Fungsi async untuk load data
	}
});

4. Todo List

Menambah/menghapus item dinamis:

const todoForm = document.querySelector("#todo-form");
todoForm.addEventListener("submit", (e) => {
	e.preventDefault();
	const input = document.querySelector("#todo-input");
	const list = document.querySelector("#todo-list");
	const newItem = document.createElement("li");
	newItem.textContent = input.value;
	list.appendChild(newItem);
	input.value = "";
});

5. Image Gallery Preview

Menampilkan preview gambar yang dipilih:

const fileInput = document.querySelector("#image-upload");
fileInput.addEventListener("change", (e) => {
	const preview = document.querySelector("#preview");
	preview.src = URL.createObjectURL(e.target.files[0]);
});

Referensi:

MDN Event Reference untuk event handling.

Contoh-contoh ini menunjukkan bagaimana DOM membuat web lebih interaktif dengan sedikit kode. Coba modifikasi sesuai kebutuhan!

Perbedaan DOM dan Virtual DOM

DOM (Document Object Model)

Apa itu: Representasi langsung dari struktur HTML yang di-render browser. Setiap perubahan (misal: update teks) memicu reflow dan repaint yang mahal secara performa.
Cara kerja:

// Contoh manipulasi DOM langsung
document.getElementById("title").textContent = "Baru"; // Langsung mempengaruhi render tree

Virtual DOM

Apa itu: Konsep yang dipopulerkan React (sumber resmi). Salinan ringan dari DOM nyata, berbentuk objek JavaScript. Perubahan di Virtual DOM dibandingkan (diffing) dengan snapshot sebelumnya, lalu hanya update bagian yang berubah di DOM nyata (reconciliation).
Contoh konseptual:

// Pseudocode Virtual DOM (seperti React)
const oldVDOM = { type: 'div', props: { className: 'box' } };
const newVDOM = { type: 'div', props: { className: 'box active' } };
// React hanya mengupdate class "active" di DOM nyata

Perbedaan Kunci

Performansi:
- DOM: Lambat untuk update besar karena operasi langsung di browser.
- Virtual DOM: Minimalkan operasi DOM nyata dengan diffing algoritma.
Kompleksitas:
- DOM: Manual (developer mengatur optimasi).
- Virtual DOM: Diurus framework (React, Vue, dll).
Penggunaan:
- DOM: Cocok untuk proyek kecil tanpa banyak perubahan dinamis.
- Virtual DOM: Ideal untuk aplikasi kompleks seperti SPAs.

Kapan Memilih?

Gunakan DOM langsung untuk proyek mikro atau manipulasi sederhana.
Pilih Virtual DOM jika membangun aplikasi dengan banyak state dinamis (contoh: dashboard real-time).

// Contoh React: Virtual DOM bekerja di balik layar
function Component() {
	const [text, setText] = useState("Awal");
	return <h1 onClick={() => setText("Baru")}>{text}</h1>;
}

Virtual DOM bukan pengganti DOM, tapi lapisan optimasi. Pahami keduanya untuk pilih tool yang tepat!

Event Handling pada DOM

Event handling memungkinkan website merespons interaksi pengguna (klik, scroll, input, dll). Berikut cara kerjanya di JavaScript:

1. Metode Dasar

Gunakan addEventListener untuk menangkap event:

const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
	console.log("Tombol diklik!");
});

2. Jenis Event Umum

Klik: 'click'
Input Form: 'input', 'change'
Keyboard: 'keydown', 'keyup'
Mouse: 'mouseover', 'mouseout'
Scroll: 'scroll'

Contoh input real-time:

document.getElementById("search").addEventListener("input", (e) => {
	console.log("Pencarian:", e.target.value);
})

3. Event Bubbling & Delegasi

Bubbling: Event merambat dari elemen anak ke parent.
Delegasi: Efisien untuk elemen dinamis dengan memanfaatkan bubbling.

Contoh delegasi (sumber: MDN):

document.querySelector("#list").addEventListener("click", (e) => {
	if (e.target.matches("li")) {
		console.log("Item list diklik:", e.target.textContent);
	}
});

4. Hentikan Event

e.preventDefault(): Membatalkan aksi default (misal: form submit).
e.stopPropagation(): Menghentikan bubbling.

document.querySelector("a").addEventListener("click", (e) => {
	e.preventDefault();
	console.log("Link dicek, tapi tidak navigasi.");
});

5. Event Object

Setiap event menyimpan info seperti:

target: Elemen yang memicu event.
clientX/clientY: Posisi kursor.

Contoh koordinat klik:

document.addEventListener("click", (e) => {
	console.log(`Klik di (${e.clientX}, ${e.clientY})`);
});

Event handling adalah inti interaktivitas web—mulai dari tombol sederhana hingga aplikasi kompleks.

Tips Efisiensi Manipulasi DOM

Manipulasi DOM yang tidak optimal bisa memperlambat performa web. Berikut cara meminimalkan dampaknya:

1. Batasi Akses DOM

Setiap akses DOM (seperti getElementById) memerlukan traversal pohon. Cache elemen yang sering digunakan:

// Buruk: Akses DOM berulang
for (let i = 0; i < 100; i++) {
	document.getElementById("item").style.color = "red";
}
// Baik: Cache elemen
const item = document.getElementById("item");
for (let i = 0; i < 100; i++) {
	item.style.color = "red";
}

2. Gunakan `DocumentFragment` untuk Operasi Massal

Memasukkan banyak elemen sekaligus mengurangi reflow. Contoh dari MDN:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
	const div = document.createElement("div");
	fragment.appendChild(div);
}
document.body.appendChild(fragment); // Hanya 1 reflow!

3. Hindari `innerHTML` untuk Update Kecil

innerHTML mem-parsing ulang seluruh konten. Gunakan textContent atau manipulasi elemen langsung:

// Buruk
div.innerHTML = "<span>" + newText + "</span>";
// Baik
const span = document.createElement("span");
span.textContent = newText;
div.replaceChildren(span);

4. Debounce Event yang Sering Terjadi

Untuk event seperti resize atau scroll, gunakan debounce untuk mengurangi eksekusi:

let timeout;
window.addEventListener("resize", () => {
	clearTimeout(timeout);
	timeout = setTimeout(() => {
		console.log("Resize selesai");
	}, 200);
});

5. Manfaatkan `requestAnimationFrame` untuk Animasi

Lebih efisien daripada setTimeout/setInterval:

const animate = () => {
	element.style.left = (parseInt(element.style.left) + 1) + "px";
	requestAnimationFrame(animate);
};
animate();

6. Hapus Event Listener yang Tidak Dipakai

Mencegah memory leak dengan removeEventListener:

const handler = () => console.log("Klik");
button.addEventListener("click", handler);
// Saat tidak perlu:
button.removeEventListener("click", handler);

Optimasi DOM kritis untuk aplikasi cepat—terutama di perangkat rendah-spec.

Tools untuk Debugging DOM

Debugging DOM lebih mudah dengan alat modern. Berikut tools yang sering digunakan developer:

1. Chrome DevTools

Built-in di browser Chrome (docs). Fitur utama:

Elements Panel: Inspeksi langsung DOM, edit CSS/HTML real-time.
Console: Akses elemen dengan $0 (elemen terpilih di inspector).

$0.style.backgroundColor = "yellow"; // Debug cepat

2. Breakpoints pada Perubahan DOM

Langsung pause JavaScript saat elemen dimodifikasi:

Klik kanan elemen di Elements Panel → Break on → Subtree modifications.

3. React DevTools & Vue DevTools

Khusus framework seperti React/Vue:

Melihat komponen, props, dan state (bukan DOM mentah).
Install sebagai ekstensi browser.

4. Performance Monitor

Pantau dampak manipulasi DOM terhadap performa:

Buka DevTools → Performance → rekam aktivitas.

5. `console.dir()`

Tampilkan properti lengkap elemen sebagai objek:

const el = document.getElementById("app");
console.dir(el); // Lihat methods/properti

6. Library External

jsdom: Simulasi DOM di Node.js untuk testing.

const { JSDOM } = require("jsdom");
const dom = new JSDOM(`<div id="root"></div>`);
console.log(dom.window.document.getElementById("root"));

Contoh Debugging Praktis:

// Cek ukuran elemen yang tidak terlihat
const hiddenEl = document.querySelector(".hidden");
console.log(hiddenEl.offsetHeight); // 0? Cek CSS `display`/`visibility`

Gunakan kombinasi tools ini untuk identifikasi masalah seperti memory leak, reflow berlebihan, atau selektor yang salah.

Studi Kasus Penggunaan DOM

Berikut contoh nyata bagaimana DOM dimanfaatkan di aplikasi modern:

1. Live Search Filter

Saring daftar konten tanpa reload, seperti pencarian produk:

const searchInput = document.getElementById("search");
searchInput.addEventListener("input", () => {
	const query = searchInput.value.toLowerCase();
	document.querySelectorAll(".item").forEach(item => {
		const text = item.textContent.toLowerCase();
		item.style.display = text.includes(query) ? "block" : "none";
	});
});

2. Drag & Drop UI

Membuat antarmuka drag-and-drop dengan API DOM (MDN Reference):

const draggable = document.querySelector(".draggable");
draggable.addEventListener("dragstart", (e) => {
	e.dataTransfer.setData("text/plain", e.target.id);
});
document.querySelector(".dropzone").addEventListener("drop", (e) => {
	e.preventDefault();
	const id = e.dataTransfer.getData("text/plain");
	e.target.appendChild(document.getElementById(id));
});

3. Single Page Application (SPA) Routing

Update konten halaman tanpa reload menggunakan history.pushState:

document.querySelectorAll(".nav-link").forEach(link => {
	link.addEventListener("click", (e) => {
		e.preventDefault();
		history.pushState({}, "", e.target.href);
		document.getElementById("content").innerHTML = loadPage(e.target.dataset.page);
	});
});

4. Real-Time Form Validation

Validasi input saat pengguna mengetik:

document.getElementById("password").addEventListener("input", (e) => {
	const feedback = document.getElementById("password-feedback");
	feedback.textContent = e.target.value.length < 8 ?
		"Password terlalu pendek" : "";
});

5. Interactive Data Visualization

Update chart SVG/Canvas berdasarkan data dinamis:

const updateChart = (data) => {
	document.querySelectorAll(".chart-bar").forEach((bar, i) => {
		bar.style.height = `${data[i] * 10}px`;
	});
};

Contoh Ekstrem: Game Browser Sederhana

const player = document.getElementById("player");
document.addEventListener("keydown", (e) => {
	const left = parseInt(player.style.left || 0);
	player.style.left = `${left + (e.key === "ArrowRight" ? 10 : -10)}px`;
});

DOM adalah tulang punggung web interaktif—dari fitur sederhana hingga kompleks seperti aplikasi Figma atau Google Docs.

Manipulasi DOM adalah kunci membuat web yang dinamis dan interaktif. Dari mengubah teks sederhana hingga membangun aplikasi single-page, penguasaan DOM memungkinkan developer menciptakan pengalaman pengguna yang responsif. Tools modern seperti querySelector, addEventListener, dan Virtual DOM membantu optimasi performa. Tantangannya adalah memilih teknik yang tepat—mulai dari akses elemen efisien hingga event handling yang cerdas. Dengan praktik dan pemahaman mendalam, DOM bukan lagi hal menakutkan, melainkan senjata ampuh untuk membangun web modern.