Objek Dokumen JavaScript Dijelaskan: Properti, Metode DOM, dan Contoh Praktis

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan

JavaScript adalah bahasa pemrograman penting untuk pengembangan web. Di antara fitur intinya, objek dokumen memainkan peran sentral dalam mengontrol dan memanipulasi struktur serta konten halaman web. Pada artikel ini, Anda akan mempelajari objek dokumen JavaScript dengan cara yang dapat dipahami oleh pemula hingga pengguna menengah.

Apa kegunaan JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan bersama HTML dan CSS, terutama untuk menciptakan perilaku dinamis dan interaksi pengguna pada halaman web. Contohnya meliputi validasi input formulir, menampilkan menu popup, dan menambahkan efek animasi.

Secara khusus, objek dokumen menyediakan fungsionalitas untuk mengakses dan mengedit elemen pada halaman web menggunakan JavaScript. Dengan objek ini, Anda dapat memilih elemen HTML, menambahkan elemen baru, menetapkan event, dan melakukan banyak operasi lainnya.

Mengapa Anda perlu mempelajari objek dokumen?

Objek dokumen berfungsi sebagai bagian dari DOM (Document Object Model). DOM adalah model yang merepresentasikan struktur dokumen HTML atau XML dengan cara yang dapat dimanipulasi secara programatik, dan pengetahuan tentangnya pada dasarnya diperlukan untuk pengembangan web.

Dengan memahami model ini dan belajar cara menggunakan objek dokumen secara efektif, Anda dapat menangani situasi seperti berikut:

• Pembaruan dinamis pada antarmuka pengguna
• Validasi formulir secara real‑time
• Pemuatan dan rendering data secara asynchronous (AJAX atau Fetch API)
• Implementasi jendela modal dan menu popup

Apa yang akan Anda pelajari dalam artikel ini

Artikel ini menjelaskan segala hal mulai dari dasar hingga penggunaan lanjutan objek dokumen secara terstruktur, menggunakan contoh kode praktis untuk menunjukkan cara kerjanya. Setelah membacanya, Anda akan dapat memahami hal‑hal berikut:

• Struktur dasar dan fungsionalitas objek dokumen
• Cara memilih dan memanipulasi elemen HTML
• Cara menyiapkan event listener serta contoh penggunaan praktis
• Peringatan penting dan praktik terbaik

Pemula dapat memahami dasar‑dasarnya dengan kuat, sementara pengguna menengah dapat memperoleh petunjuk untuk menulis kode yang lebih efisien.

2. Apa Itu Objek document JavaScript?

Dalam JavaScript, objek document adalah salah satu antarmuka paling penting untuk bekerja dengan halaman web. Disediakan sebagai bagian dari DOM (Document Object Model), objek ini memungkinkan Anda dengan mudah memanipulasi dan mengubah elemen di dalam halaman web.

Peran objek document

Objek document mewakili seluruh dokumen HTML yang dimuat oleh browser. Ini memungkinkan Anda mengontrol struktur HTML, gaya, dan konten secara programatik menggunakan JavaScript.

Sebagai contoh, Anda dapat melakukan hal‑hal berikut:

• Memilih dan mengedit elemen HTML
• Membuat dan menambahkan elemen baru
• Mengubah warna latar belakang halaman atau isi teks
• Mendeteksi aksi pengguna dengan menetapkan event listener

Hubungan antara DOM dan objek document

DOM (Document Object Model) merepresentasikan dokumen HTML atau XML sebagai struktur pohon. Di puncak pohon tersebut terdapat objek document.

Diagram di bawah ini menunjukkan tampilan sederhana hubungan antara DOM dan objek document.

document
├── html
│   ├── head
│   │   └── title
│   └── body
│       ├── div
│       ├── p
│       └── button

Dengan cara ini, objek document mewakili seluruh halaman sebagai pohon dan berfungsi sebagai titik awal untuk mengakses setiap elemen.

Penggunaan dasar objek document

Mari lihat beberapa contoh sederhana penggunaan objek document.

Contoh 1: Mendapatkan judul halaman

console.log(document.title); // Get the page title

Contoh 2: Mengubah warna latar belakang

document.body.style.backgroundColor = "lightblue";

Contoh 3: Memilih dan mengedit sebuah elemen

let heading = document.getElementById("main-title");
heading.textContent = "New Title";

Dengan menggabungkan operasi‑operasi ini, Anda dapat membangun halaman web yang interaktif dan dinamis.

Fitur Utama Objek document

1. Pembaruan waktu nyata – Perubahan pada dokumen langsung tercermin.
2. Akses ke struktur hierarkis – Anda dapat memilih dan memodifikasi elemen secara fleksibel dengan menelusuri pohon DOM.
3. Manajemen acara – Anda dapat menambahkan pendengar acara berdasarkan tindakan pengguna.

3. Properti dan Metode Utama Objek document

Objek document JavaScript menyediakan banyak properti dan metode yang mendukung berbagai operasi halaman web. Pada bagian ini, kami akan memperkenalkan properti dan metode yang umum digunakan.

1. Properti yang Umum Digunakan

Berikut adalah properti yang umum digunakan dari objek document dan kegunaannya.

Properti ini membantu Anda dengan mudah mengambil dan memperbarui informasi tentang halaman web.

2. Metode yang Umum Digunakan

Selanjutnya, berikut adalah metode yang digunakan untuk memanipulasi elemen dan menambahkan elemen baru.

3. Contoh Menggabungkan Properti dan Metode

Mari kita lihat contoh penggunaan nyata.

Contoh 1: Mendapatkan Nilai Formulir

let form = document.forms[0];
let input = form.elements["username"];
console.log(input.value);

Contoh 2: Membuat dan Menambahkan Elemen Baru

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

Contoh 3: Menambahkan Acara Klik

document.getElementById("myButton").addEventListener("click", () => {
    alert("The button was clicked!");
});

4. Ringkasan

Objek document menyediakan kumpulan properti dan metode yang kaya yang berguna untuk memanipulasi halaman web. Dengan menguasainya, Anda dapat membuat halaman web yang lebih interaktif dan fungsional.

4. Memilih dan Memanipulasi Elemen HTML (Dengan Contoh Kode)

Dengan menggunakan objek document JavaScript, Anda dapat dengan mudah memilih elemen HTML, mengedit kontennya, dan mengubah atributnya. Pada bagian ini, kami akan menjelaskan teknik pemilihan dan manipulasi umum secara detail dengan contoh kode.

1. Cara Memilih Elemen HTML

1-1. Memilih berdasarkan ID – getElementById()

Memilih elemen menggunakan atribut ID yang ditetapkan pada elemen HTML.

Contoh: Mengubah Teks Elemen
HTML:

<h1 id="title">Original Title</h1>

JavaScript:

let title = document.getElementById("title");
title.textContent = "New Title"; // Change the text

Poin Kunci

• ID harus unik. Anda tidak dapat menetapkan ID yang sama ke beberapa elemen.

1-2. Memilih berdasarkan nama kelas – getElementsByClassName()

Memilih beberapa elemen yang berbagi nama kelas yang sama.

Contoh: Mengubah Warna Latar Belakang
HTML:

<div class="box">Box 1</div>
<div class="box">Box 2</div>

JavaScript:

let boxes = document.getElementsByClassName("box");
for (let i = 0; i < boxes.length; i++) {
    boxes[i].style.backgroundColor = "lightblue";
}

Poin Kunci

• Anda mengiterasi elemen-elemen tersebut seperti array dan memanipulasinya satu per satu.

1-3. Memilih berdasarkan nama tag – getElementsByTagName()

Memilih semua elemen dengan nama tag yang ditentukan.

Contoh: Mengubah Warna Semua Paragraf
HTML:

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

JavaScript:

let paragraphs = document.getElementsByTagName("p");
for (let p of paragraphs) {
    p.style.color = "green";
}

1-4. Memilih dengan selektor CSS – querySelector() dan querySelectorAll()

Menggunakan selektor CSS memungkinkan Anda memilih elemen secara lebih fleksibel.

Memilih satu elemen – querySelector()

let firstDiv = document.querySelector("div.box");
firstDiv.textContent = "Selected box";

Memilih beberapa elemen – querySelectorAll()

let allDivs = document.querySelectorAll("div.box");
allDivs.forEach(div => div.style.border = "1px solid red");

2. Cara Memanipulasi Elemen HTML

2-1. Mengedit Teks atau HTML

Contoh: Perbedaan antara innerHTML dan textContent
HTML:

<div id="content">Original text</div>

JavaScript:

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

// Change text only
content.textContent = "<b>New text</b>"; // Displayed as plain text

// Change including HTML
content.innerHTML = "<b>New text</b>"; // Displayed in bold

Poin penting

• textContent memperlakukan tag sebagai string biasa dan tidak menginterpretasikannya sebagai HTML.
• innerHTML menerapkan HTML secara langsung, tetapi Anda harus berhati-hati terhadap keamanan (pencegahan XSS).

2-2. Mengedit atribut

Contoh: Mengubah tautan
HTML:

<a id="link" href="https://example.com">Original link</a>

JavaScript:

let link = document.getElementById("link");
link.setAttribute("href", "https://google.com"); // Change the URL
link.textContent = "Link to Google";             // Change the label

2-3. Membuat dan menambahkan elemen baru

Contoh: Menambahkan item daftar baru
HTML:

<ul id="list">
  <li>Item 1</li>
</ul>

JavaScript:

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "Item 2"; // Create a new item
list.appendChild(newItem);      // Append to the end of the list

2-4. Menghapus elemen

Contoh: Menghapus elemen saat mengklik tombol
HTML:

<div id="box">Element to be removed</div>
<button id="deleteBtn">Remove</button>

JavaScript:

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

deleteBtn.addEventListener("click", () => {
    box.remove(); // Remove the element
});

3. Ringkasan

Pada bagian ini, Anda belajar cara memilih dan memanipulasi elemen HTML menggunakan objek document melalui contoh praktis. Menguasai teknik-teknik ini membuat kontrol dinamis halaman web menjadi jauh lebih mudah.

5. Langkah-langkah Membuat dan Menambahkan Elemen Baru (Dengan Diagram)

Dengan menggunakan objek document JavaScript, Anda dapat secara dinamis membuat elemen HTML baru dan menambahkannya ke halaman yang sudah ada. Pada bagian ini, kami menjelaskan langkah-langkah spesifik untuk membuat dan menambahkan elemen dengan contoh kode dan diagram.

1. Cara membuat elemen baru

1-1. Membuat elemen – createElement()

Buat elemen HTML baru menggunakan metode document.createElement().

Contoh: Membuat elemen paragraf baru

let newParagraph = document.createElement("p"); // Create a new <p> element
newParagraph.textContent = "This paragraph was added dynamically."; // Set the text

Poin penting

• Elemen yang dibuat belum ditambahkan ke DOM.
• Anda dapat dengan bebas mengatur teks dan atribut.

2. Mengatur atribut dan gaya pada sebuah elemen

2-1. Mengatur atribut – setAttribute()

Untuk mengatur atribut pada elemen yang dibuat, gunakan metode setAttribute().

Contoh: Menambahkan atribut ke elemen tautan

let link = document.createElement("a");
link.textContent = "Google";
link.setAttribute("href", "https://google.com"); // Set the URL
link.setAttribute("target", "_blank");           // Open in a new tab

2-2. Mengatur gaya – properti style

Jika Anda ingin mengatur desain secara langsung, gunakan properti style.

Contoh: Mengatur gaya tombol

let button = document.createElement("button");
button.textContent = "Click";
button.style.backgroundColor = "blue"; // Background color
button.style.color = "white";          // Text color
button.style.padding = "10px 20px";    // Padding

3. Menambahkan elemen ke halaman

Anda dapat menambahkan elemen yang dibuat ke DOM menggunakan appendChild() atau insertBefore().

3-1. Menambahkan ke akhir – appendChild()

Contoh: Menambahkan item daftar
HTML:

<ul id="list">
  <li>Item 1</li>
</ul>

JavaScript:

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "Item 2"; // Create a new item
list.appendChild(newItem);      // Append to the end of the list

3-2. Menambahkan pada posisi tertentu – insertBefore()

Contoh: Menyisipkan item pada posisi tertentu

let referenceItem = list.firstElementChild; // Use the first item as a reference
list.insertBefore(newItem, referenceItem);  // Insert before the first item

4. Menghapus elemen

Anda dapat menghapus elemen yang dibuat menggunakan removeChild() atau remove().

4-1. Menghapus elemen anak – removeChild()

let itemToRemove = list.lastElementChild; // Get the last item
list.removeChild(itemToRemove);           // Remove it

4-2. Menghapus elemen itu sendiri – remove()

newItem.remove(); // Remove itself

5. Contoh praktis: Membuat elemen kartu secara dinamis

Berikut adalah contoh yang secara dinamis membuat elemen “card” baru, mengatur gaya, dan menambahkannya ke halaman.

HTML:

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

JavaScript:

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

// Create the card element
let card = document.createElement("div");
card.classList.add("card"); // Add a class

// Create the card title
let title = document.createElement("h2");
title.textContent = "Card Title";

// Create the card body text
let description = document.createElement("p");
description.textContent = "This is the description text for the card.";

// Assemble and append
card.appendChild(title);
card.appendChild(description);
container.appendChild(card); // Append to the page

// Styling
card.style.border = "1px solid #ccc";
card.style.padding = "10px";
card.style.margin = "10px";
card.style.width = "200px";
card.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";

Hasil:

Card Title
This is the description text for the card.

6. Ringkasan

Pada bagian ini, Anda mempelajari alur kerja lengkap mulai dari membuat elemen baru, mengatur atribut dan gaya, hingga menambahkannya ke halaman. Dengan menerapkan teknik ini, pembuatan konten web dinamis menjadi jauh lebih mudah.

6. Cara Menyiapkan Event Listener (Contoh Praktis)

Dalam JavaScript, Anda dapat menggunakan objek document untuk menyiapkan event listener dan menjalankan pemrosesan dinamis sebagai respons terhadap tindakan pengguna. Pada bagian ini, kami menjelaskan semuanya mulai dari dasar-dasar event listener hingga contoh penggunaan praktis.

1. Apa itu event listener?

Event listener adalah mekanisme yang mendeteksi tindakan pengguna (seperti klik, input, atau gerakan mouse) dan mengeksekusi operasi yang sesuai.

Contoh: Event klik dasar

document.getElementById("myButton").addEventListener("click", () => {
    alert("The button was clicked!");
});

2. Cara menambahkan event listener

2-1. Penggunaan dasar addEventListener()

Metode addEventListener() menggunakan sintaks berikut:

element.addEventListener(event, function, useCapture);

Deskripsi parameter

1. event – Tipe event (misalnya: click, mouseover, keydown ).
2. function – Fungsi yang akan dijalankan (anonim atau bernama).
3. useCapture – Metode propagasi event (true untuk capture, false untuk bubbling).

Contoh: Menambahkan event mouseover

let box = document.getElementById("box");
box.addEventListener("mouseover", () => {
    box.style.backgroundColor = "lightblue";
});

3. Tipe event yang umum digunakan

Berikut adalah tipe event yang umum digunakan beserta contohnya.

4. Contoh praktis event listener

4-1. Mengubah teks dengan mengklik tombol

HTML:

<button id="changeText">Change</button>
<p id="text">Original text</p>

JavaScript:

let button = document.getElementById("changeText");
let text = document.getElementById("text");

button.addEventListener("click", () => {
    text.textContent = "Teks baru";
});

4-2. Real-time input detection

HTML:

<input type="text" id="nameInput" placeholder="Masukkan nama Anda">
<p id="output"></p>

JavaScript:

let input = document.getElementById("nameInput");
let output = document.getElementById("output");

input.addEventListener("input", () => {
    output.textContent = "Masukan: " + input.value;
});

4-3. Change background color on hover

HTML:

<div id="hoverBox" style="width: 100px; height: 100px; background-color: lightgray;"></div>

JavaScript:

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

hoverBox.addEventListener("mouseover", () => {
    hoverBox.style.backgroundColor = "yellow";
});

hoverBox.addEventListener("mouseout", () => {
    hoverBox.style.backgroundColor = "lightgray";
});

5. How to remove event listeners

You can remove an event listener using the removeEventListener() method.

Example: Remove a click event

function handleClick() {
    alert("Diklik!");
}

let button = document.getElementById("myButton");
button.addEventListener("click", handleClick);

// Remove the event listener
button.removeEventListener("click", handleClick);

Important note

• To remove an event listener, you must reference the same function. Anonymous functions cannot be removed.

6. Summary

In this section, you learned how to set up event listeners, common event types, and practical usage examples. Mastering event handling is essential for creating interactive web applications.

7. Common Practical Use Cases and Applied Scenarios

The JavaScript document object can be applied in many real-world scenarios. In this section, we introduce common use cases and applied scenarios frequently seen in actual development.

1. Dynamic form validation

Form input validation is important for improving user experience. Below is an example that checks input in real time.

HTML

<form id="signupForm">
  <label for="email">Surel:</label>
  <input type="email" id="email" required>
  <span id="emailError" style="color: red;"></span>
  <br>
  <button type="submit">Kirim</button>
</form>

JavaScript

let emailInput = document.getElementById("email");
let emailError = document.getElementById("emailError");
let form = document.getElementById("signupForm");

// Input validation
emailInput.addEventListener("input", () => {
    let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(emailInput.value)) {
        emailError.textContent = "Silakan masukkan alamat surel yang valid.";
    } else {
        emailError.textContent = "";
    }
});

// Check on form submission
form.addEventListener("submit", (event) => {
    if (emailError.textContent !== "") {
        event.preventDefault();
        alert("Ada kesalahan dalam masukan Anda.");
    }
});

2. Dynamic content generation

This example dynamically generates new elements based on user actions.

HTML

<div id="container"></div>
<button id="addItem">Tambah item</button>

JavaScript

let container = document.getElementById("container");
let addButton = document.getElementById("addItem");

addButton.addEventListener("click", () => {
    let newItem = document.createElement("div");
    newItem.textContent = "Item baru";
    newItem.style.border = "1px solid #ccc";
    newItem.style.padding = "10px";
    newItem.style.margin = "5px 0";
    container.appendChild(newItem);
});

Result: A new item is added each time the button is clicked.

8. Cautions and Best Practices

The JavaScript document object is very powerful, but improper usage can negatively impact performance and security. In this section, we introduce important cautions and best practices to keep your code safe and efficient.

1. Performance optimization

1-1. Minimalkan operasi DOM

Operasi DOM mahal, jadi Anda harus mengurangi jumlah kali mereka dilakukan.

Contoh buruk (operasi DOM berulang di dalam loop)

for (let i = 0; i < 100; i++) {
    let div = document.createElement("div");
    div.textContent = "Item " + i;
    document.body.appendChild(div);
}

Contoh yang ditingkatkan (menggunakan Document Fragment)

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    let div = document.createElement("div");
    div.textContent = "Item " + i;
    fragment.appendChild(div);
}
document.body.appendChild(fragment);

Poin penting

• Fragmen dapat ditambahkan ke DOM dalam satu operasi, meningkatkan kinerja.

1-2. Kurangi reflow dan repaint

Sering mengubah gaya menyebabkan reflow dan repaint, yang dapat memperlambat rendering.

Contoh buruk

let box = document.getElementById("box");
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "red";

Contoh yang ditingkatkan (pembaruan batch)

let box = document.getElementById("box");
Object.assign(box.style, {
    width: "100px",
    height: "100px",
    backgroundColor: "red"
});

2. Pertimbangan keamanan

2-1. Mencegah serangan XSS

Menggunakan innerHTML dapat memungkinkan skrip berbahaya disuntikkan.

Contoh berbahaya

let userInput = "<script>alert('Attack!')</script>";
document.getElementById("output").innerHTML = userInput;

Contoh aman

let userInput = "<script>alert('Attack!')</script>";
document.getElementById("output").textContent = userInput;

Poin penting

• Selalu sanitasi input pengguna sebelum menampilkannya.

2-2. Pengelolaan yang tepat dari event listener

Jika event listener yang tidak terpakai tidak dihapus, mereka dapat menyebabkan kebocoran memori.

Contoh buruk

document.getElementById("button").addEventListener("click", () => {
    alert("Clicked!");
});

Contoh yang ditingkatkan (hapus listener ketika tidak lagi diperlukan)

function handleClick() {
    alert("Clicked!");
}
let button = document.getElementById("button");
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

3. Keterbacaan dan pemeliharaan

3-1. Konvensi penamaan yang konsisten

Gunakan nama variabel dan fungsi yang deskriptif yang jelas menunjukkan perannya.

Contoh buruk

let a = document.getElementById("username");
let b = document.getElementById("password");

Contoh yang ditingkatkan

let usernameInput = document.getElementById("username");
let passwordInput = document.getElementById("password");

3-2. Membuat fungsi yang dapat digunakan kembali

Dengan merombak kode menjadi fungsi, Anda mengurangi duplikasi dan meningkatkan pemeliharaan.

Contoh buruk

document.getElementById("btn1").addEventListener("click", () => alert("Button 1"));
document.getElementById("btn2").addEventListener("click", () => alert("Button 2"));

Contoh yang ditingkatkan

function handleClick(message) {
    alert(message);
}

document.getElementById("btn1").addEventListener("click", () => handleClick("Button 1"));
document.getElementById("btn2").addEventListener("click", () => handleClick("Button 2"));

4. Pertimbangan seluler dan responsif

Saat menggunakan JavaScript, pastikan perilaku yang mulus pada perangkat seluler juga.

Tips dan langkah-langkah

1. Alternatif untuk event klik – Pada seluler, pertimbangkan touchstart atau touchend .
2. Pengaturan viewport – Konfigurasikan viewport dengan benar untuk mencegah zoom yang tidak diinginkan.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

3. Kombinasikan dengan media queries – Gunakan media queries CSS untuk tata letak responsif.

5. Ringkasan

Bagian ini mencakup peringatan penting dan praktik terbaik untuk menggunakan objek document dengan aman dan efisien.

• Optimisasi kinerja : Minimalkan operasi DOM.
• Keamanan : Cegah XSS dan tangani input pengguna dengan aman.
• Pemeliharaan : Tulis kode yang mudah dibaca dan dapat digunakan kembali.
• Dukungan seluler : Pertimbangkan desain responsif dan peristiwa sentuh.

9. FAQ: Pertanyaan Umum untuk Pemula

Pemula yang mulai menggunakan objek JavaScript document sering menghadapi berbagai pertanyaan dan masalah. Bagian ini menjawab pertanyaan umum dalam format tanya jawab.

Q1. Mengapa saya tidak dapat memilih elemen menggunakan getElementById()?

A:
Alasan umum meliputi hal berikut:

1. ID tidak tepat

• ID yang ditentukan tidak ada atau salah eja.
• Solusi : Periksa bahwa ID di HTML Anda cocok dengan yang ada di JavaScript Anda.

2. Waktu eksekusi skrip

• Jika JavaScript dijalankan sebelum HTML dimuat, elemen belum ada.
• Solusi : Gunakan event DOMContentLoaded.

  document.addEventListener("DOMContentLoaded", () => {
      let element = document.getElementById("myDiv");
      console.log(element.textContent);
  });
  

Q2. Apa perbedaan antara innerHTML dan textContent?

A:

• innerHTML : Mengambil atau mengatur semua konten termasuk tag HTML.
• textContent : Mengambil atau mengatur hanya konten teks (tag HTML diabaikan).

Q3. Mengapa saya tidak dapat memodifikasi elemen yang dikembalikan oleh querySelectorAll()?

A:
querySelectorAll() mengembalikan NodeList statis, yang bukan array. Anda harus melakukan iterasi atasnya untuk menerapkan perubahan.

let items = document.querySelectorAll(".item");
items.forEach(item => {
    item.style.color = "blue";
});

Q4. Mengapa addEventListener() tidak berfungsi?

A:
Alasan yang mungkin meliputi:

1. Elemen tidak ditemukan

• Elemen target tidak dipilih dengan benar.
• Solusi : Periksa di konsol apakah elemen tersebut ada.

Q5. Mengapa removeChild() menghasilkan error?

A:
Elemen yang akan dihapus harus menjadi anak dari elemen induk.

let list = document.getElementById("list");
let item = document.getElementById("item1");
list.removeChild(item);

6. Ringkasan

Bagian FAQ ini membahas masalah umum pemula. Memperhatikan pemilihan elemen, timing, dan penggunaan metode yang tepat akan membantu Anda menghindari banyak masalah.

10. Kesimpulan dan Langkah Selanjutnya

Sepanjang artikel ini, Anda telah mempelajari objek JavaScript document mulai dari konsep dasar hingga aplikasi praktis. Mari tinjau poin-poin utama dan lihat langkah selanjutnya untuk pembelajaran lebih lanjut.

Dengan menguasai objek document, Anda memperoleh dasar yang diperlukan untuk membangun aplikasi web yang dinamis, interaktif, dan efisien. Sebagai langkah selanjutnya, jelajahi manipulasi DOM lanjutan, integrasi API, dan kerangka kerja modern untuk lebih meningkatkan keterampilan Anda.