Memahami Manipulasi DOM dalam JavaScript: Panduan Pemula

Panduan pemula ini meneroka manipulasi Model Objek Dokumen (DOM) JavaScript, teknik yang berkuasa untuk mencipta halaman web interaktif. Kami akan merangkumi perkara asas, membolehkan anda mengubah kandungan statik kepada pengalaman yang dinamik dan menarik.

---

Memahami DOM

DOM ialah antara muka pengaturcaraan yang mewakili dokumen HTML anda sebagai struktur objek seperti pokok. Fikirkan ia seperti salasilah keluarga: teg ialah akar, bercabang kepada dan , yang seterusnya bercabang kepada elemen lain seperti <title></title>, <div> dan <code><p></p>. JavaScript membolehkan anda mengakses, mengubah suai, menambah, mengalih keluar dan menyusun semula elemen ini.

---

Mengapa Belajar Manipulasi DOM?

1. Kandungan Dinamik: Kemas kini kandungan halaman web (teks, imej) berdasarkan tindakan pengguna.
2. Ciri Interaktif: Cipta elemen seperti modal, lungsur turun dan peluncur.
3. Pengendalian Acara: Balas kepada input pengguna (klik, penekanan kekunci, pergerakan tetikus).

---

Mengakses Elemen DOM

Memilih elemen ialah langkah pertama. JavaScript menawarkan beberapa kaedah:

1. Dengan ID

const element = document.getElementById('myId');

2. Mengikut Nama Kelas

const elements = document.getElementsByClassName('myClass');

3. Mengikut Nama Teg

const paragraphs = document.getElementsByTagName('p');

4. Menggunakan Pemilih CSS (querySelector/querySelectorAll)

const firstElement = document.querySelector('.myClass'); // First element matching the selector
const allElements = document.querySelectorAll('.myClass'); // All matching elements

---

Manipulasi DOM Biasa

1. Menukar Kandungan

Ubah suai teks elemen atau HTML:

- Kandungan Teks:

document.getElementById('example').textContent = 'New Text';

- Kandungan HTML:

document.getElementById('example').innerHTML = '<b>Bold Text</b>';

2. Menukar Atribut

Kemas kini atau tambah atribut elemen:

const image = document.querySelector('img');
image.setAttribute('src', 'newImage.jpg');
image.setAttribute('alt', 'New Description');

3. Mengubah Suai Gaya

Tukar penampilan elemen menggunakan .style atau kelas CSS:

const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.color = 'white';

box.classList.add('active');
box.classList.remove('inactive');
box.classList.toggle('highlight');

4. Menambah dan Mengalih Keluar Elemen

Buat dan manipulasi elemen secara dinamik:

- Buat dan Tambah:

const newDiv = document.createElement('div');
newDiv.textContent = 'I am a new div!';
document.body.appendChild(newDiv);

- Alih Keluar Elemen:

const element = document.getElementById('removeMe');
element.remove();

---

Pengendalian Acara

Gabungkan manipulasi DOM dengan pendengar acara untuk bertindak balas terhadap tindakan pengguna.

Contoh: Klik Butang

(Kod contoh ditiadakan untuk kependekan, tetapi termasuk menambahkan pendengar acara pada elemen butang.)

Acara Biasa: click, mouseover, keydown, dsb.

---

DOM Traversal

Navigasi pepohon DOM menggunakan sifat seperti .parentNode, .parentElement, .children, .childNodes, .nextElementSibling dan .previousElementSibling untuk mengakses elemen berkaitan.

---

Petua Prestasi

• Minimumkan Akses DOM: Simpan rujukan elemen dalam pembolehubah untuk digunakan semula.
• Kemas Kini Kelompok: Gunakan documentFragment untuk menambah berbilang elemen dengan cekap.
• Elak Berlebihan innerHTML: Gunakan createElement untuk prestasi dan keselamatan yang lebih baik.

---

Kesimpulan

Manipulasi DOM adalah penting untuk pembangunan web moden. Menguasai teknik ini membolehkan anda membina antara muka pengguna yang dinamik dan menarik. Mulakan dengan projek mudah dan teroka konsep yang lebih maju secara beransur-ansur.