cari

Rumah  >  Artikel  >  hujung hadapan web  >  Apakah itu DOM (Document Object Modle) dalam JavaScript

Apakah itu DOM (Document Object Modle) dalam JavaScript

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-27 18:30:11303semak imbas

What is DOM (Document Object Modle) in 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:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <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: 

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <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.

Atas ialah kandungan terperinci Apakah itu DOM (Document Object Modle) dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Object for select xml using Interface Attribute Event dom this alert ui Access
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：Mengapa JS Saya tidak `li` onclick Berfungsi dalam IE8?Artikel seterusnya：Mengapa JS Saya tidak `li` onclick Berfungsi dalam IE8?

Artikel berkaitan

Lihat lagi