Menguasai Manipulasi DOM dalam JavaScript: Panduan Komprehensif

Manipulasi DOM dalam JavaScript

Manipulasi DOM ialah aspek asas pembangunan web moden yang membolehkan pembangun mengubah suai kandungan, struktur dan gaya halaman web secara dinamik. Model Objek Dokumen (DOM) mewakili struktur HTML halaman web dalam format seperti pepohon.

---

1. Apakah DOM itu?

DOM ialah antara muka yang disediakan oleh penyemak imbas yang membenarkan JavaScript berinteraksi dengan HTML dan CSS. Ia mewakili halaman sebagai pepohon nod, dengan setiap elemen, atribut atau teks ialah nod.

Contoh:

Untuk HTML di bawah:

<div>



<p>The DOM structure looks like this:</p>

<ul>
<li>Document

<ul>
<li>HTML</li>
<li>Body

<ul>
<li>Div (id="container")</li>
<li>Paragraph ("Hello, World!")</li>
</ul>


</li>

</ul>

</li>

</ul>


<hr>

<h3>
  
  
  <strong>2. Selecting DOM Elements</strong>
</h3>

<h4>
  
  
  <strong>A. Using getElementById</strong>
</h4>

<p>Select an element by its ID.<br>
</p>

<pre class="brush:php;toolbar:false">const container = document.getElementById("container");
console.log(container); // Output: <div>



<h4>
  
  
  <strong>B. Using querySelector</strong>
</h4>

<p>Select the first matching element.<br>
</p>

<pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p");
console.log(paragraph); // Output: <p>Hello, World!</p>

C. Menggunakan querySelectorAll

Pilih semua elemen padanan sebagai NodeList.

const allParagraphs = document.querySelectorAll("p");
console.log(allParagraphs); // Output: NodeList of <p> elements

---

3. Mengubah suai Elemen DOM

A. Menukar Kandungan

Gunakan sifat textContent atau innerHTML untuk mengubah suai kandungan.

const paragraph = document.querySelector("p");
paragraph.textContent = "Hello, JavaScript!";
// Changes <p>Hello, World!</p> to <p>Hello, JavaScript!</p>

B. Menukar Atribut

Gunakan setAttribute atau penetapan harta langsung.

const image = document.querySelector("img");
image.setAttribute("src", "new-image.jpg");
image.alt = "A descriptive text";

C. Menukar Gaya

Ubah suai sifat gaya untuk menggunakan gaya sebaris.

const container = document.getElementById("container");
container.style.backgroundColor = "lightblue";
container.style.padding = "20px";

---

4. Menambah dan Mengalih Keluar Elemen

A. Mencipta Elemen Baharu

Gunakan kaedah createElement.

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

B. Mengalih keluar Elemen

Gunakan kaedah buang atau removeChild.

const paragraph = document.querySelector("p");
paragraph.remove(); // Removes the paragraph from the DOM

---

5. Menambahkan Pendengar Acara pada Elemen

Anda boleh menambah interaktiviti pada elemen menggunakan pendengar acara.

const button = document.createElement("button");
button.textContent = "Click Me";

button.addEventListener("click", function() {
  alert("Button clicked!");
});

document.body.appendChild(button);

---

6. Merentasi DOM

Navigasi melalui elemen ibu bapa, anak dan adik-beradik.

A. Ibu Bapa dan Anak

const child = document.querySelector("p");
const parent = child.parentElement;
console.log(parent); // Output: Parent element of <p>

const children = parent.children;
console.log(children); // Output: HTMLCollection of child elements

B. Adik beradik

const sibling = child.nextElementSibling;
console.log(sibling); // Output: Next sibling element

---

7. Pengoptimuman Prestasi

1. Gunakan documentFragment untuk Kemas Kini Kelompok: Minimumkan aliran semula dan mengecat semula dengan mengumpulkan kemas kini DOM.

   const fragment = document.createDocumentFragment();
   for (let i = 0; i < 5; i++) {
     const li = document.createElement("li");
     li.textContent = `Item ${i + 1}`;
     fragment.appendChild(li);
   }
   document.querySelector("ul").appendChild(fragment);

1. Meminimumkan Manipulasi DOM Terus:
   Cache elemen dan ubah suai secara pukal.

2. Gunakan Perpustakaan DOM Maya:
   Untuk aplikasi yang rumit, pertimbangkan perpustakaan seperti React atau Vue.

---

8. Contoh Praktikal: Senarai Tugasan

<div>



<p>The DOM structure looks like this:</p>

<ul>
<li>Document

<ul>
<li>HTML</li>
<li>Body

<ul>
<li>Div (id="container")</li>
<li>Paragraph ("Hello, World!")</li>
</ul>


</li>

</ul>

</li>

</ul>


<hr>

<h3>
  
  
  <strong>2. Selecting DOM Elements</strong>
</h3>

<h4>
  
  
  <strong>A. Using getElementById</strong>
</h4>

<p>Select an element by its ID.<br>
</p>

<pre class="brush:php;toolbar:false">const container = document.getElementById("container");
console.log(container); // Output: <div>



<h4>
  
  
  <strong>B. Using querySelector</strong>
</h4>

<p>Select the first matching element.<br>
</p>

<pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p");
console.log(paragraph); // Output: <p>Hello, World!</p>

---

9. Ringkasan

• Manipulasi DOM membolehkan pembangun mengubah suai halaman web secara dinamik.
• Gunakan kaedah seperti getElementById, querySelector dan createElement untuk manipulasi yang berkesan.
• Kurangkan manipulasi DOM langsung untuk prestasi yang lebih baik.

Menguasai Manipulasi DOM adalah penting untuk mencipta aplikasi web yang dinamik, interaktif dan mesra pengguna.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Menguasai Manipulasi DOM dalam JavaScript: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!