Apakah itu DOM (Document Object Modle) dalam JavaScript

DOM (Model Objek Dokumen) ialah antara muka pengaturcaraan untuk dokumen web. Ia mewakili struktur halaman web sebagai pepohon objek, di mana setiap objek sepadan dengan bahagian halaman, seperti elemen, atribut dan kandungan teks.

Dalam JavaScript, DOM membenarkan anda berinteraksi dengan dokumen HTML atau XML secara pengaturcaraan. Ia membolehkan anda mengubah suai kandungan, struktur dan gaya halaman web secara dinamik.

Konsep Utama DOM:

1. Dokumen: Merujuk kepada keseluruhan halaman web.
2. Elemen: Mewakili teg HTML seperti
   ,

   , , dsb.

3. Nod: Unit asas dalam pepohon DOM, yang boleh menjadi elemen, teks atau atribut.
4. Pokok DOM: Struktur hierarki yang mewakili halaman web sebagai pepohon nod. Nod akar ialah dokumen dan setiap elemen HTML ialah nod yang bercabang daripadanya.

Contoh Perwakilan DOM:

Untuk dokumen HTML seperti:


  
    <title>My Page</title>
  
  
    <div>



<p>The DOM for this document might look like this:<br>
</p>

<pre class="brush:php;toolbar:false">Document
 ├── html
     ├── head
     │    └── title
     └── body
          └── div#content
               ├── h1
               └── p

Cara JavaScript Menggunakan DOM:

1. Mengakses Elemen: JavaScript boleh memilih dan mengakses elemen daripada DOM menggunakan kaedah seperti document.getElementById() atau document.querySelector().

   let heading = document.getElementById("content");

1. Memanipulasi Elemen: JavaScript boleh mengubah suai kandungan, atribut atau gaya elemen.

   heading.innerHTML = "New Content";
   heading.style.color = "red";

1. Pengendalian Acara: JavaScript boleh melampirkan pendengar acara pada elemen DOM untuk bertindak balas kepada tindakan pengguna seperti klik, penekanan kekunci, dsb.

   document.getElementById("myButton").addEventListener("click", function() {
     alert("Button clicked!");
   });

1. Mencipta dan Mengalih Keluar Elemen: JavaScript boleh mencipta elemen baharu secara dinamik atau mengalih keluar elemen sedia ada.

   const newElement = document.createElement("div");
   document.body.appendChild(newElement);

Mengapa DOM Penting:

• Ia menyediakan cara untuk JavaScript berinteraksi dan memanipulasi struktur dan kandungan halaman web.
• Ia membenarkan halaman web yang dinamik dan interaktif tanpa memerlukan muat semula halaman (cth., untuk mengemas kini UI atau mengendalikan input pengguna).

Kaedah DOM:

Berikut ialah beberapa kaedah DOM yang biasa digunakan dalam JavaScript:

• getElementById(): Memilih elemen mengikut IDnya.
• querySelector(): Memilih elemen padanan pertama menggunakan pemilih CSS.
• createElement(): Mencipta elemen HTML baharu.
• appendChild(): Menambahkan nod anak baharu pada elemen.
• removeChild(): Mengalih keluar nod anak daripada elemen.
• setAttribute(): Menetapkan atribut pada elemen.
• addEventListener(): Melampirkan pengendali acara pada elemen.

Contoh dalam Tindakan:

  
    <title>My Page</title>
  
  
    <div>



<p>The DOM for this document might look like this:<br>
</p>

<pre class="brush:php;toolbar:false">Document
 ├── html
     ├── head
     │    └── title
     └── body
          └── div#content
               ├── h1
               └── p

Dalam contoh ini, elemen h1 dipilih, kandungannya dikemas kini dan pendengar acara klik dilampirkan padanya. Apabila tajuk diklik, makluman ditunjukkan.

DOM ialah konsep penting untuk memanipulasi struktur halaman web secara dinamik dengan JavaScript dan ia adalah asas untuk mencipta aplikasi web interaktif.