Apakah itu DOM (Document Object Modle) dalam JavaScript-tutorial js-php.cn

Apakah itu DOM (Document Object Modle) dalam JavaScript

Mary-Kate Olsen

Lepaskan： 2024-11-27 18:30:11

asal

324 orang telah melayarinya

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:

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

Nod: Unit asas dalam pepohon DOM, yang boleh menjadi elemen, teks atau atribut.

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

Salin selepas log masuk

Cara JavaScript Menggunakan DOM:

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!