JavaScript DOM Selection

1. Pengenalan JavaScript DOM

1.1 Apa itu Document Object Model?

Document Object Model (DOM) adalah representasi struktur dokumen HTML dalam bentuk objek yang dapat dimanipulasi menggunakan JavaScript. Ketika browser memuat sebuah halaman web, ia mengonversi HTML menjadi struktur data berbentuk pohon (tree), di mana setiap elemen menjadi node (simpul).

Dengan DOM, JavaScript dapat:

Mengakses elemen HTML
Mengubah konten dan atribut
Menambahkan atau menghapus elemen
Menangani event (klik, input, dll)

Contoh sederhana:

<p id="text">Hello World</p>

// Mengakses elemen menggunakan DOM
const element = document.getElementById("text");
console.log(element.textContent); // Output: Hello World

1.2 Memahami Konsep DOM Tree (Parent-Child)

DOM direpresentasikan sebagai tree structure dengan hubungan hierarkis:

Penjelasan:

html adalah root element
body adalah child dari html
div adalah parent dari span dan a
span dan a adalah sibling

2. Teknik Memilih Elemen (Selecting Elements)

2.1 Menggunakan `getElementById()`

Metode ini adalah cara paling cepat dan spesifik untuk memilih elemen berdasarkan ID.

<button id="btn">Klik Saya</button>

// Mengambil elemen berdasarkan ID
const button = document.getElementById("btn");

// Menambahkan event listener
button.addEventListener("click", function() {
  console.log("Button diklik!");
});

Catatan:

ID harus unik dalam satu halaman
Mengembalikan satu elemen (bukan koleksi)

2.2 Menggunakan `getElementsByClassName()` dan `getElementsByTagName()`

Metode ini termasuk pendekatan legacy, namun masih sering digunakan.

2.2.1. `getElementsByClassName()`

<p class="item">Item 1</p>
<p class="item">Item 2</p>

// Mengambil semua elemen dengan class "item"
const items = document.getElementsByClassName("item");

// HTMLCollection (bukan array)
for (let i = 0; i < items.length; i++) {
  console.log(items[i].textContent);
}

2.2.2. `getElementsByTagName()`

<li>List 1</li>
<li>List 2</li>

// Mengambil semua elemen <li>
const listItems = document.getElementsByTagName("li");

// Iterasi hasil
for (let item of listItems) {
  console.log(item.textContent);
}

Karakteristik:

Mengembalikan HTMLCollection
Bersifat live (dinamis) → berubah jika DOM berubah

2.3 Pendekatan Modern: `querySelector()` dan `querySelectorAll()`

Ini adalah metode modern yang lebih fleksibel karena mendukung CSS selector kompleks.

2.3.1. `querySelector()`

Mengambil elemen pertama yang cocok.

<div class="box"></div>
<div class="box"></div>

// Mengambil elemen pertama dengan class "box"
const box = document.querySelector(".box");

console.log(box); // hanya 1 elemen pertama

2.3.2. `querySelectorAll()`

Mengambil semua elemen yang cocok.

// Mengambil semua elemen dengan class "box"
const boxes = document.querySelectorAll(".box");

// NodeList (bisa pakai forEach)
boxes.forEach(function(box) {
  console.log(box);
});

Contoh selector kompleks:

// Selector CSS kompleks
const special = document.querySelectorAll("div.box > span.active");

console.log(special);

Keunggulan:

Mendukung selector seperti:
- .class
- #id
- div > p
- [data-id="123"]
Lebih konsisten dengan CSS

3. Analisis Komparatif & Best Practices

3.1 HTMLCollection vs NodeList: Memahami Sifat Live vs Static

Fitur	HTMLCollection (`getElementsBy...`)	NodeList (`querySelectorAll`)
Tipe	HTMLCollection	NodeList
Live / Static	Live (otomatis update)	Static (tidak update)
Bisa pakai `forEach`	Tidak	Ya
Performa update DOM	Lebih mahal (auto update)	Lebih stabil
Kemudahan penggunaan	Lebih terbatas	Lebih fleksibel

Contoh perbedaan:

const items = document.getElementsByClassName("item"); // live
const nodes = document.querySelectorAll(".item"); // static

// Tambahkan elemen baru ke DOM
document.body.innerHTML += '<p class="item">Baru</p>';

console.log(items.length); // Bertambah otomatis
console.log(nodes.length); // Tetap

3.2 Performa: Kapan menggunakan ID vs QuerySelector

Gunakan getElementById() jika:
- Anda tahu ID elemen
- Membutuhkan performa maksimal
Gunakan querySelector() jika:
- Membutuhkan fleksibilitas selector
- Struktur DOM kompleks

3.3 Teknik Caching Elemen untuk Optimasi Memori

Mengakses DOM berulang kali itu mahal. Solusinya adalah caching.

Tidak efisien:

// Query DOM berulang
document.querySelector("#btn").addEventListener("click", function() {
  document.querySelector("#text").textContent = "Clicked!";
});

Lebih efisien:

// Simpan referensi ke variabel (cache)
const button = document.querySelector("#btn");
const text = document.querySelector("#text");

button.addEventListener("click", function() {
  text.textContent = "Clicked!";
});

Keuntungan caching:

Mengurangi traversal DOM
Meningkatkan performa
Kode lebih bersih dan readable

4. Mengubah Konten HTML dan Text (DOM Manipulation Dasar)

Setelah elemen berhasil dipilih, langkah berikutnya adalah memodifikasi isi dari elemen tersebut.

4.1 Mengubah Text dengan `textContent`

textContent digunakan untuk:

Mengambil isi teks
Mengganti teks di dalam elemen

<p id="message">Halo Dunia</p>
<button id="changeText">Ubah Text</button>

const message = document.getElementById("message");
const button = document.getElementById("changeText");

// Mengubah text saat tombol diklik
button.addEventListener("click", function() {
  message.textContent = "Teks berhasil diubah!";
});

4.2 Mengubah HTML dengan `innerHTML`

innerHTML memungkinkan kita untuk:

Membaca isi HTML
Menyisipkan HTML baru

<div id="container"></div>

const container = document.getElementById("container");

// Menambahkan HTML ke dalam div
container.innerHTML = "<h2>Judul Baru</h2><p>Ini paragraf baru</p>";

Perbedaan penting:

textContent → hanya teks
innerHTML → bisa HTML (tag ikut diproses)

5.3 Menambahkan Konten Tanpa Menghapus yang Lama

innerHTML akan mengganti seluruh isi. Jika ingin menambahkan:

const list = document.getElementById("list");

// Menambahkan item baru tanpa menghapus lama
list.innerHTML += "<li>Item Baru</li>";

5.4 Pendekatan Lebih Baik: `createElement()`

Cara modern dan lebih baik adalah membuat elemen baru:

<ul id="list"></ul>

const list = document.getElementById("list");

// Membuat elemen baru
const newItem = document.createElement("li");

// Menambahkan teks
newItem.textContent = "Item dari createElement";

// Menambahkan ke DOM
list.appendChild(newItem);

Keunggulan:

Lebih aman dari XSS (Cross-Site Scripting)
Tidak merusak struktur DOM yang ada
Lebih performan dibanding manipulasi innerHTML berulang

JavaScript DOM Selection

On this page