cari

Rumah >hujung hadapan web >tutorial js >Memahami Manipulasi DOM dalam JavaScript: Panduan Pemula

Memahami Manipulasi DOM dalam JavaScript: Panduan Pemula

Susan Sarandon
Susan Sarandonasal
2025-01-17 22:32:10742semak imbas
<p>Understanding DOM Manipulation in JavaScript: A Beginner’s Guide

<p>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

<p>DOM ialah antara muka pengaturcaraan yang mewakili dokumen HTML anda sebagai struktur objek seperti pokok. Fikirkan ia seperti salasilah keluarga: teg <html> ialah akar, bercabang kepada <head> dan <body>, yang seterusnya bercabang kepada elemen lain seperti <title>, <div> dan <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

<p>Memilih elemen ialah langkah pertama. JavaScript menawarkan beberapa kaedah:

1. Dengan ID

<code class="language-javascript">const element = document.getElementById('myId');</code>

2. Mengikut Nama Kelas

<code class="language-javascript">const elements = document.getElementsByClassName('myClass');</code>

3. Mengikut Nama Teg

<code class="language-javascript">const paragraphs = document.getElementsByTagName('p');</code>

4. Menggunakan Pemilih CSS (querySelector/querySelectorAll)

<code class="language-javascript">const firstElement = document.querySelector('.myClass'); // First element matching the selector
const allElements = document.querySelectorAll('.myClass'); // All matching elements</code>

Manipulasi DOM Biasa

1. Menukar Kandungan

<p>Ubah suai teks elemen atau HTML:

<p>- Kandungan Teks:

<code class="language-javascript">document.getElementById('example').textContent = 'New Text';</code>
<p>- Kandungan HTML:

<code class="language-javascript">document.getElementById('example').innerHTML = '<b>Bold Text</b>';</code>

2. Menukar Atribut

<p>Kemas kini atau tambah atribut elemen:

<code class="language-javascript">const image = document.querySelector('img');
image.setAttribute('src', 'newImage.jpg');
image.setAttribute('alt', 'New Description');</code>

3. Mengubah Suai Gaya

<p>Tukar penampilan elemen menggunakan .style atau kelas CSS:

<code class="language-javascript">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');</code>

4. Menambah dan Mengalih Keluar Elemen

<p>Buat dan manipulasi elemen secara dinamik:

<p>- Buat dan Tambah:

<code class="language-javascript">const newDiv = document.createElement('div');
newDiv.textContent = 'I am a new div!';
document.body.appendChild(newDiv);</code>
<p>- Alih Keluar Elemen:

<code class="language-javascript">const element = document.getElementById('removeMe');
element.remove();</code>

Pengendalian Acara

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

<p>Contoh: Klik Butang

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

<p>Acara Biasa: click, mouseover, keydown, dsb.

DOM Traversal

<p>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

<p>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.

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

JavaScript batch css html Static Object for include using class Interface Event append dom this innerHTML transform input Access Other
Kenyataan：
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
Artikel sebelumnya：Roundup JavaScript Mingguan: Pautan Jumaat 5 JanuariArtikel seterusnya：Roundup JavaScript Mingguan: Pautan Jumaat 5 Januari

Artikel berkaitan

Lihat lagi