Memahami Model Objek Dokumen (DOM) dalam JavaScript

DDD

Lepaskan： 2024-09-19 01:06:02

asal

842 orang telah melayarinya

Understanding Document Object Model (DOM) in JavaScript

Helo, Pembangun JavaScript yang Hebat ?

Penyemak imbas menyediakan antara muka pengaturcaraan yang dipanggil Document Object Model (DOM) yang membenarkan skrip—JavaScript khususnya—berinteraksi dengan reka letak halaman web. Model Objek Dokumen (DOM) halaman web, struktur seperti pokok hierarki yang menyusun komponen halaman menjadi objek, dicipta oleh penyemak imbas semasa ia dimuatkan. Gaya, organisasi dan kandungan dokumen semuanya boleh diakses dan diubah secara dinamik dengan bantuan paradigma ini.

Menggunakan DOM untuk berinteraksi

Banyak operasi boleh dijalankan pada Model Objek Dokumen (DOM) oleh JavaScript, termasuk:

Mengubah suai kandungan elemen HTML
Menambah atau mengalih keluar elemen dan atribut
Membalas peristiwa pengguna seperti klik atau tekanan kekunci
Mencipta acara baharu dalam halaman

Contoh

Anda boleh menggunakan JavaScript untuk mengubah kandungan elemen dengan menyasarkannya dengan fungsi document.getElementById() dan kemudian menukar sifat innerHTML elemen:

// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";

Salin selepas log masuk

Struktur DOM

Objek dokumen berada di dasar DOM, yang disusun sebagai pokok objek. Setiap elemen HTML diwakili sebagai nod dalam pepohon, dan nod ini mampu mempunyai peristiwa, kaedah dan sifat yang berkaitan. Dengan menawarkan cara untuk menavigasi dan bekerja dengan nod ini, DOM membolehkan skrip mengubah halaman dalam masa nyata.

Berikut ialah contoh asas tentang rupa pokok DOM dokumen HTML biasa:

document
├── html
│ ├── head
│ │ └── title
│ └── body
│ ├── h1
│ └── p

Salin selepas log masuk

Fungsi DOM dalam Pembangunan Web

DOM adalah penting untuk pembangunan web untuk beberapa sebab.

Ia membolehkan anda mencipta halaman web dinamik dan interaktif dengan membenarkan skrip menukar gaya dan kandungan halaman sebagai tindak balas kepada input pengguna.
Ia memastikan keseragaman merentas platform dengan menawarkan antara muka piawai untuk pelbagai pelayar berinteraksi dan memanipulasi halaman dalam talian.
Aplikasi satu halaman (SPA) bergantung pada DOM untuk memuat semula halaman tanpa memerlukan muat semula, oleh itu ia adalah penting untuk operasinya.

Tahap dan Piawaian DOM

World Wide Web Consortium (W3C) mengekalkan standard DOM, yang menjamin kebolehpercayaan dan konsistensinya merentas pelbagai penyemak imbas dan sistem web. Standard dipecahkan kepada pelbagai bahagian dan peringkat, termasuk:

Paradigma asas untuk semua jenis dokumen ialah * DOM Teras:.
Model dokumen XML dipanggil XML DOM.
HTML DOM: Model ini dicipta khas untuk fail HTML.

Lebih banyak keupayaan dan kefungsian ditambah dengan setiap versi standard DOM, membolehkan manipulasi dan interaksi dokumen dalam talian yang lebih rumit.

Ilustrasi Dunia Sebenar Manipulasi DOM

Berikut ialah ilustrasi dunia sebenar tentang cara anda boleh berkomunikasi dengan dokumen HTML menggunakan DOM:

<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="header">Hello, World!</h1>
<button onclick="changeHeader()">Change Header</button>

<script>
function changeHeader() {
// Use the DOM to access and modify the h1 element
var header = document.getElementById("header");
header.textContent = "DOM Manipulation in Action!";
header.style.color = "blue";
}
</script>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, mengklik butang memanggil fungsi changeHeader(), yang menggunakan DOM untuk mengakses

elemen dengan IDnya. Ia kemudian menukar kandungan teks dan warna pengepala.

Teknik DOM Penting

1. Pemilihan Pertanyaan

Gunakan document.querySelector() untuk mengambil elemen dengan ketepatan yang tepat.

Penjelasan: querySelector() membenarkan anda memilih elemen menggunakan pemilih CSS, menjadikannya cara yang berkuasa dan fleksibel untuk mengakses Elemen DOM.

Contoh

// Select the first element with class 'myClass'

const element = document.querySelector('.myClass');

// Select a specific element by ID
const header = document.querySelector('#header' );

// Select the first <p> inside a <div>
const paragraph = document.querySelector('div p');

Salin selepas log masuk

2. Kandungan Dinamik

Ubah suai innerHTML atau textContent untuk mengemas kini kandungan halaman dengan cepat.

Penjelasan: innerHTML atau textContent membolehkan anda menukar kandungan elemen secara dinamik, membolehkan halaman web interaktif dan responsif.

Contoh

// Using innerHTML (can include HTML tags)

document.querySelector('#myDiv').innerHTML = '<strong>New content!</strong>';

// Using textContent (plain text only, safer for user inputs)

document.querySelector('#myParagraph').textContent = 'Updated text content';

Salin selepas log masuk

3. Mendengar Acara

Lampirkan addEventListener() pada elemen untuk Pengalaman pengguna interaktif.

Penjelasan: addEventListener() membolehkan anda bertindak balas terhadap tindakan pengguna seperti klik, penekanan kekunci atau pergerakan tetikus, mencipta aplikasi web interaktif.

Contoh

const button = document.querySelector('#myButton' );

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

// Using arrow function
document.addEventListener('keydown', (event) => {
     console. log( 'Key pressed:', event.key);
});

Salin selepas log masuk

4. DOM Traversal

Navigasi pepohon DOM dengan sifat parentNode, anak dan adik beradik.

Penjelasan: DOM Traversal membolehkan anda bergerak melalui struktur dokumen, mengakses elemen berkaitan berdasarkan kedudukannya dalam pepohon DOM.

Example

const child = document.querySelector('#childElement');

// Access parent
const parent = child.parentNode;

// Access siblings
const nextSibling = child.nextElementSibling;
const prevSibling = child.previousElementSibling;

// Access children
const firstChild = parent.firstElementChild;
const allChildren = parent.children;

Salin selepas log masuk

Conclusion

The DOM is a powerful tool in JavaScript that enables developers to create rich, interactive web experiences. By understanding and utilizing the DOM, developers can control the behavior and appearance of web pages, making them more engaging and responsive to user interactions.

Atas ialah kandungan terperinci Memahami Model Objek Dokumen (DOM) dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!