Rumah > hujung hadapan web > tutorial js > Menguasai Manipulasi DOM dalam JavaScript: Panduan Komprehensif

Menguasai Manipulasi DOM dalam JavaScript: Panduan Komprehensif

DDD
Lepaskan: 2024-12-18 02:43:10
asal
1057 orang telah melayarinya

Mastering DOM Manipulation in JavaScript: A Comprehensive Guide

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>
Salin selepas log masuk
Salin selepas log masuk

C. Menggunakan querySelectorAll

Pilih semua elemen padanan sebagai NodeList.

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

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>
Salin selepas log masuk

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";
Salin selepas log masuk

C. Menukar Gaya

Ubah suai sifat gaya untuk menggunakan gaya sebaris.

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

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);
Salin selepas log masuk

B. Mengalih keluar Elemen

Gunakan kaedah buang atau removeChild.

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

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);
Salin selepas log masuk

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
Salin selepas log masuk

B. Adik beradik

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

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);
Salin selepas log masuk
  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>
Salin selepas log masuk
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan