Memahami Model Objek Dokumen (DOM) dalam 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";

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

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:

<title>DOM Example</title>


<h1 id="Hello-World">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>

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 </p><div>
const paragraph = document.querySelector('div p');




<h3>
  
  
  2. Kandungan Dinamik
</h3>

<p>Ubah suai innerHTML atau textContent untuk mengemas kini kandungan halaman dengan cepat. </p>

<p><strong>Penjelasan:</strong> innerHTML atau textContent membolehkan anda menukar kandungan elemen secara dinamik, membolehkan halaman web interaktif dan responsif.</p>

<h4>
  
  
  Contoh
</h4>



<pre class="brush:php;toolbar:false">// 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';

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);
});

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;

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.