Memahami Manipulasi DOM dalam JavaScript: Panduan Pemula-tutorial js-php.cn

Memahami Manipulasi DOM dalam JavaScript: Panduan Pemula

Susan Sarandon

Lepaskan： 2025-01-17 22:32:10

asal

793 orang telah melayarinya

Understanding DOM Manipulation in JavaScript: A Beginner’s Guide

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 <html> ialah akar, bercabang kepada <head> dan <body>, yang seterusnya bercabang kepada elemen lain seperti <title>, <div> dan . JavaScript membolehkan anda mengakses, mengubah suai, menambah, mengalih keluar dan menyusun semula elemen ini.

Mengapa Belajar Manipulasi DOM?

Kandungan Dinamik: Kemas kini kandungan halaman web (teks, imej) berdasarkan tindakan pengguna.
Ciri Interaktif: Cipta elemen seperti modal, lungsur turun dan peluncur.
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

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

Salin selepas log masuk

2. Mengikut Nama Kelas

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

Salin selepas log masuk

3. Mengikut Nama Teg

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

Salin selepas log masuk

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>

Salin selepas log masuk

Manipulasi DOM Biasa

1. Menukar Kandungan

Ubah suai teks elemen atau HTML:

- Kandungan Teks:

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

Salin selepas log masuk

- Kandungan HTML:

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

Salin selepas log masuk

2. Menukar Atribut

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>

Salin selepas log masuk

3. Mengubah Suai Gaya

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>

Salin selepas log masuk

4. Menambah dan Mengalih Keluar Elemen

Buat dan manipulasi elemen secara dinamik:

- Buat dan Tambah:

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

Salin selepas log masuk

- Alih Keluar Elemen:

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

Salin selepas log masuk

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.

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