DOM JavaScript: Pengertian dan Cara Manipulasi Elemen

DOM (Document Object Model) adalah representasi struktur dokumen HTML atau XML dalam bentuk objek yang dapat diakses dan dimanipulasi menggunakan JavaScript. Dengan DOM, developer dapat mengubah konten, struktur, dan gaya halaman web secara dinamis tanpa harus memuat ulang halaman.

DOM bertindak sebagai jembatan antara HTML dan JavaScript:

• HTML → struktur halaman
• CSS → tampilan visual
• JavaScript → logika dan manipulasi interaktif melalui DOM

Dengan memahami DOM, seorang pemula dapat membuat halaman web yang interaktif, responsif, dan dinamis.

Baca juga: Pengenalan JSON di JavaScript: Parse dan Stringify

Pengertian DOM JavaScript

DOM adalah interface pemrograman untuk dokumen HTML dan XML

Setiap elemen, atribut, dan teks di dalam halaman menjadi node yang dapat diakses melalui objek DOM

Dengan DOM, JavaScript dapat:

• Membaca konten halaman
• Mengubah teks, atribut, dan gaya
• Menambahkan atau menghapus elemen secara dinamis

1. Peran DOM dalam HTML dan JavaScript

• Menghubungkan konten HTML dengan skrip JavaScript
• Mengizinkan manipulasi interaktif seperti klik tombol, form input, dan animasi
• Membantu membuat SPA (Single Page Application) yang responsif

Contoh sederhana:

<p id="demo">Halo Dunia!</p>
<script>
    document.getElementById("demo").innerText = "Halo JavaScript!";
</script>Code language: HTML, XML (xml)

• document.getElementById("demo") → akses elemen DOM
• innerText → mengubah konten teks secara dinamis

2. DOM Tree dan Node

• DOM diorganisir dalam struktur pohon (tree)
• Setiap elemen HTML, teks, atau atribut disebut node
• Node types utama:
  • Element Node → elemen HTML (<div>, <p>)
  • Text Node → teks di dalam elemen
  • Attribute Node → atribut elemen (id, class)
• Root node biasanya adalah document

Visualisasi sederhana DOM tree:

document
 └─ html
     ├─ head
     └─ body
         ├─ h1
         └─ pCode language: JavaScript (javascript)

3. Hubungan DOM dengan Browser

• Browser membaca HTML dan membangun DOM secara otomatis
• DOM memungkinkan JavaScript mengakses dan memanipulasi elemen halaman
• Perubahan DOM akan langsung terlihat pada tampilan halaman (rendering)

4. Mengapa Belajar DOM Penting untuk Pemula

• DOM adalah dasar dari interaktivitas web
• Mengetahui DOM memungkinkan pemula untuk:
  • Membuat efek klik, hover, animasi
  • Mengubah konten halaman secara dinamis
  • Mengelola form dan event input
• Menjadi fondasi untuk belajar library dan framework modern seperti React, Vue, atau Angular

Mengakses Elemen DOM

Salah satu kemampuan dasar DOM adalah mengakses elemen HTML agar bisa dibaca atau dimanipulasi. JavaScript menyediakan beberapa metode untuk menargetkan elemen tertentu:

• Berdasarkan id
• Berdasarkan class
• Berdasarkan tag
• Berdasarkan CSS selector

Memahami perbedaan metode ini penting untuk memilih cara paling efisien sesuai kebutuhan. Beberapa metode menghasilkan HTMLCollection dan beberapa NodeList, yang memiliki perilaku sedikit berbeda saat manipulasi.

1. getElementById()

• Mengakses elemen berdasarkan atribut id
• Mengembalikan satu elemen (unique)

Sintaks:

let element = document.getElementById("demo");
element.innerText = "Hello DOM!";Code language: JavaScript (javascript)

Cocok untuk elemen unik yang hanya ada satu di halaman.

2. getElementsByClassName()

• Mengakses semua elemen dengan class tertentu
• Mengembalikan HTMLCollection (live collection)

Sintaks:

let items = document.getElementsByClassName("item");
console.log(items.length); // jumlah elemen dengan class "item"
items[0].style.color = "red";Code language: JavaScript (javascript)

HTMLCollection live, artinya berubah otomatis saat DOM berubah.

3. getElementsByTagName()

• Mengakses elemen berdasarkan nama tag (misal <p>, <div>)
• Mengembalikan HTMLCollection

Sintaks:

let paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.fontWeight = "bold";
}Code language: JavaScript (javascript)

Efisien untuk manipulasi banyak elemen sejenis.

4. querySelector() dan querySelectorAll()

Menggunakan CSS selector untuk menargetkan elemen

• querySelector() → mengembalikan elemen pertama yang cocok
• querySelectorAll() → mengembalikan NodeList (statik)

Contoh:

let firstItem = document.querySelector(".item"); // elemen pertama
let allItems = document.querySelectorAll(".item"); // semua elemen

allItems.forEach(item => {
    item.style.backgroundColor = "#f0f0f0";
});Code language: JavaScript (javascript)

NodeList statik, tidak berubah otomatis saat DOM berubah.

5. Perbedaan NodeList dan HTMLCollection

Berikut ini adalah tabel perbandingan antara NodeList dan HTMLCollection:

Fitur	NodeList	HTMLCollection
Live collection	Tidak (querySelectorAll)	Ya (getElementsByClassName, getElementsByTagName)
Bisa di-iterasi langsung	Ya (forEach di NodeList modern)	Tidak, gunakan for loop
Mendukung CSS selector	Ya	Tidak

Pilih metode sesuai kebutuhan: NodeList untuk CSS selector, HTMLCollection untuk update live saat DOM berubah.

6. Contoh Penggunaan Step-by-Step

HTML:

<ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>
<p id="demo">Hello World</p>Code language: HTML, XML (xml)

JavaScript:

// Akses elemen by ID
let demo = document.getElementById("demo");
demo.innerText = "Hello DOM!";

// Akses elemen by class
let items = document.getElementsByClassName("item");
for (let i = 0; i < items.length; i++) {
    items[i].style.color = "blue";
}

// Akses elemen by tag
let paragraphs = document.getElementsByTagName("p");
paragraphs[0].style.fontStyle = "italic";

// Akses elemen dengan querySelector
let firstItem = document.querySelector(".item");
firstItem.style.fontWeight = "bold";

// Akses semua dengan querySelectorAll
let allItems = document.querySelectorAll(".item");
allItems.forEach(item => item.style.backgroundColor = "#e0e0e0");Code language: JavaScript (javascript)

Dengan memahami cara mengakses elemen, langkah selanjutnya adalah mengubah konten dan atribut elemen yang akan kita bahas berikutnya.

Mengubah Konten Elemen DOM

Setelah berhasil mengakses elemen DOM, langkah berikutnya adalah mengubah konten dan atribut elemen.

JavaScript menyediakan beberapa properti untuk mengubah teks dan HTML dalam elemen:

• innerHTML → mengubah HTML internal, mendukung tag HTML
• innerText → mengubah teks yang terlihat pada halaman
• textContent → mengubah semua teks termasuk yang tersembunyi

Selain konten, kita juga dapat mengubah atribut elemen seperti id, class, src, atau href menggunakan setAttribute dan getAttribute.

Memilih metode yang tepat penting agar:

• Perubahan aman dari serangan XSS
• Tampilan halaman tetap konsisten

1. Mengubah Konten Elemen: innerHTML, innerText, textContent

innerHTML → mengubah HTML internal, mendukung tag HTML

let container = document.getElementById("demo");
container.innerHTML = "<strong>Halo JavaScript!</strong>";Code language: JavaScript (javascript)

• Mendukung HTML
• Dapat mengganti seluruh konten elemen

innerText → mengubah teks yang terlihat pada halaman

let container = document.getElementById("demo");
container.innerText = "Halo JavaScript!";Code language: JavaScript (javascript)

• Teks yang terlihat pada halaman
• Dapat mengganti seluruh konten elemen

textContent → mengubah semua teks termasuk yang tersembunyi

let container = document.getElementById("demo");
container.textContent = "Belajar DOM JavaScript";Code language: JavaScript (javascript)

• Mengubah semua teks, termasuk teks tersembunyi
• Lebih cepat daripada innerText untuk teks murni

2. Mengubah Atribut Elemen

• getAttribute() → membaca nilai atribut
• setAttribute() → mengubah atau menambah atribut

Contoh:

let link = document.querySelector("a");

// Membaca atribut href
console.log(link.getAttribute("href"));

// Mengubah href
link.setAttribute("href", "https://www.example.com");

// Menambahkan atribut baru
link.setAttribute("target", "_blank");Code language: JavaScript (javascript)

Mengubah atribut penting untuk dynamic link, image, atau form input.

3. Contoh Penggunaan Praktis

<p id="demo">Teks awal</p>
<a id="myLink" href="#">Kunjungi</a>Code language: HTML, XML (xml)

JavaScript:

// Mengubah konten
document.getElementById("demo").innerHTML = "<em>Konten diperbarui!</em>";

// Mengubah atribut link
let link = document.getElementById("myLink");
link.setAttribute("href", "https://www.google.com");
link.setAttribute("target", "_blank");

// Mengubah teks link
link.textContent = "Google";Code language: JavaScript (javascript)

4. Tips Memilih Metode Konten

• Gunakan innerHTML jika perlu menyisipkan HTML
• Gunakan textContent untuk teks murni (lebih cepat & aman)
• Gunakan innerText untuk teks terlihat yang memperhatikan style CSS
• Gunakan setAttribute/getAttribute untuk atribut dinamis seperti href, src, id, atau class

Memilih metode yang tepat akan menjaga keamanan, performa, dan konsistensi tampilan halaman.

Manipulasi Style & Class Elemen

Setelah belajar mengakses dan mengubah konten elemen, langkah berikutnya adalah memanipulasi tampilan visual elemen.

• JavaScript memungkinkan untuk mengubah style langsung melalui properti style.
• Lebih fleksibel dan efisien menggunakan class manipulation dengan classList untuk menambahkan, menghapus, atau men-toggle kelas CSS.
• Kombinasi style langsung dan class manipulation membantu membuat interaksi visual, animasi, dan efek responsif.

Memahami manipulasi style dan class adalah kunci untuk membuat halaman web interaktif dan menarik.

1. Mengubah CSS dengan style.property

Contoh mengubah warna, ukuran font, dan background:

let box = document.getElementById("box");

// Mengubah warna teks
box.style.color = "white";

// Mengubah latar belakang
box.style.backgroundColor = "blue";

// Mengubah ukuran font
box.style.fontSize = "20px";Code language: JavaScript (javascript)

style.property mengacu langsung pada properti CSS yang ingin diubah.

2. Manipulasi Kelas dengan classList

• Menambahkan kelas: element.classList.add("namaClass")
• Menghapus kelas: element.classList.remove("namaClass")
• Toggle kelas: element.classList.toggle("namaClass") → menambahkan jika belum ada, menghapus jika sudah ada

Contoh:

let button = document.querySelector("button");

button.addEventListener("click", function() {
    this.classList.toggle("highlight");
});Code language: JavaScript (javascript)

classList mempermudah pengelolaan kelas tanpa harus memanipulasi string className secara manual.

3. Menambahkan Animasi atau Efek Visual Sederhana

Bisa menggunakan CSS transition atau animation bersama JavaScript

Contoh efek highlight saat hover atau klik.

CSS:

.highlight {
    background-color: yellow;
    transition: background-color 0.5s;
}Code language: CSS (css)

let item = document.getElementById("item");
item.addEventListener("mouseover", function() {
    this.classList.add("highlight");
});
item.addEventListener("mouseout", function() {
    this.classList.remove("highlight");
});Code language: JavaScript (javascript)

4. Studi Kasus: Highlight Elemen Saat Diklik

<ul>
    <li class="list-item">Item 1</li>
    <li class="list-item">Item 2</li>
    <li class="list-item">Item 3</li>
</ul>Code language: HTML, XML (xml)

CSS:

.highlight {
    background-color: lightgreen;
    font-weight: bold;
}Code language: CSS (css)

JavaScript:

let items = document.querySelectorAll(".list-item");

items.forEach(item => {
    item.addEventListener("click", function() {
        // Hapus highlight dari semua item
        items.forEach(i => i.classList.remove("highlight"));
        // Tambahkan highlight ke item yang diklik
        this.classList.add("highlight");
    });
});Code language: JavaScript (javascript)

Dengan pendekatan ini, kita dapat memberikan feedback visual saat pengguna berinteraksi dengan halaman.

Menambahkan dan Menghapus Elemen DOM

Manipulasi DOM tidak hanya soal mengubah konten atau style; sering kali kita perlu menambah, menghapus, atau menyalin elemen secara dinamis.

• JavaScript menyediakan metode untuk membuat elemen baru, menambahkannya ke DOM, atau menghapus elemen yang sudah ada.
• Dengan memahami konsep parent dan child node, developer dapat memodifikasi struktur halaman secara efisien.
• Teknik ini penting untuk membuat UI interaktif, seperti menambahkan item ke daftar, membuat notifikasi dinamis, atau menghapus elemen yang tidak diperlukan.

1. Menambahkan Elemen: createElement() + appendChild() + insertBefore()

createElement() → membuat elemen baru di memori, belum ditambahkan ke DOM:

let newElement = document.createElement("div");
newElement.textContent = "Hello World";Code language: JavaScript (javascript)

appendChild() → menambahkan elemen ke akhir parent node:

let parent = document.getElementById("parent");
parent.appendChild(newElement);Code language: JavaScript (javascript)

insertBefore() → menambahkan elemen sebelum elemen tertentu:

let parent = document.getElementById("parent");
let referenceNode = document.getElementById("reference");
parent.insertBefore(newElement, referenceNode);Code language: JavaScript (javascript)

appendChild() menambahkan di akhir, insertBefore() menempatkan di posisi tertentu.

2. Menghapus Elemen: removeChild()

Hapus elemen dengan mengakses parent node:

let parent = document.getElementById("parent");
let child = document.getElementById("child");

parent.removeChild(child);Code language: JavaScript (javascript)

Alternatif modern:

child.remove(); // langsung hapus tanpa parentCode language: JavaScript (javascript)

Penting memahami parent-child relationship agar penghapusan elemen tidak error.

3. Menyalin Elemen: cloneNode()

• cloneNode(true) → menyalin elemen beserta semua child-nya
• cloneNode(false) → menyalin elemen saja, tanpa child

Contoh:

let original = document.getElementById("original");
let copy = original.cloneNode(true);
document.body.appendChild(copy);Code language: JavaScript (javascript)

Berguna untuk duplikasi elemen dinamis, misal membuat daftar item baru yang sama formatnya.

4. Contoh Manipulasi Elemen Step-by-Step

HTML:

<div id="parent">
    <p id="child">Ini paragraf awal</p>
</div>
<button id="add">Tambah Elemen</button>
<button id="remove">Hapus Elemen</button>Code language: HTML, XML (xml)

JavaScript:

let parent = document.getElementById("parent");
let child = document.getElementById("child");

document.getElementById("add").addEventListener("click", function() {
    let newPara = document.createElement("p");
    newPara.textContent = "Paragraf baru ditambahkan";
    parent.appendChild(newPara);
});

document.getElementById("remove").addEventListener("click", function() {
    if (parent.children.length > 0) {
        parent.removeChild(parent.lastElementChild);
    }
});Code language: JavaScript (javascript)

Dengan teknik ini, kita bisa menambah dan menghapus elemen secara dinamis, membangun interaksi yang lebih kompleks di halaman web.

Traversing DOM (Navigasi Node)

Traversing DOM adalah teknik menavigasi node dalam DOM tree untuk menemukan, membaca, atau memanipulasi elemen tertentu tanpa langsung mengaksesnya via ID atau class.

• Dengan memahami hubungan parent-child-sibling, developer dapat mengakses elemen yang tidak memiliki identifier unik.
• Traversing DOM sangat berguna ketika struktur halaman dinamis atau kompleks, misal daftar nested, tabel, atau menu multi-level.
• Teknik ini membantu menulis kode yang lebih fleksibel dan efisien, terutama pada manipulasi elemen secara dinamis.

1. Parent dan Children

• parentNode → mengakses node induk
• children → mengakses semua elemen anak (HTMLCollection)
• firstChild / lastChild → mengakses anak pertama atau terakhir

Contoh:

let parent = document.getElementById("parent");

// Akses induk
console.log(parent.parentNode);

// Akses semua anak
console.log(parent.children);

// Anak pertama
console.log(parent.firstChild);

// Anak terakhir
console.log(parent.lastChild);Code language: JavaScript (javascript)

children hanya menghitung element node, sedangkan firstChild / lastChild bisa termasuk text node (spasi/enter).

2. Sibling (Saudara Sebaris)

• nextSibling → node berikutnya
• previousSibling → node sebelumnya

Contoh:

let item = document.querySelector(".item");

// Node setelah item
console.log(item.nextSibling);

// Node sebelum item
console.log(item.previousSibling);Code language: JavaScript (javascript)

Jika ingin melewatkan text node, gunakan nextElementSibling dan previousElementSibling untuk mendapatkan element node saja.

3. Contoh Traversal

HTML:

<ul id="menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>Code language: HTML, XML (xml)

JavaScript:

let menu = document.getElementById("menu");
let firstItem = menu.firstElementChild;
let secondItem = firstItem.nextElementSibling;

secondItem.style.color = "blue"; // Mengubah 'About'Code language: JavaScript (javascript)

• Traversing memungkinkan akses elemen tertentu tanpa id atau class
• Berguna untuk modifikasi batch atau iterasi nested elements

4. Tips Efisien Traversing DOM

• Gunakan firstElementChild / lastElementChild daripada firstChild/lastChild untuk menghindari text node.
• Gunakan nextElementSibling / previousElementSibling saat hanya ingin elemen.
• Batasi traversal dalam parent container agar performa lebih baik.
• Kombinasikan traversal dengan querySelector untuk mencari elemen spesifik dengan cepat.

Traversing DOM adalah skill penting untuk membangun interaksi kompleks seperti menu dropdown, nested list, atau dynamic table.

Kesimpulan

Setelah mempelajari DOM JavaScript, pembaca kini memahami:

• Apa itu DOM dan bagaimana hubungannya dengan HTML dan browser
• Cara mengakses elemen dengan berbagai metode (getElementById, querySelector, dll)
• Cara mengubah konten dan atribut elemen
• Manipulasi style dan class untuk efek visual
• Menambah, menghapus, dan menyalin elemen secara dinamis
• Navigasi node dengan parent, children, dan sibling
• Praktik traversing DOM dan optimasi performa

Menguasai DOM adalah fundamental bagi pengembangan web interaktif. Setelah memahami dasar ini, developer dapat mengeksplorasi library DOM tambahan, seperti jQuery untuk manipulasi lebih cepat, atau React DOM untuk manajemen UI modern berbasis virtual DOM.