Menguasai JavaScript HTML DOM: Membina Halaman Web Dinamik dan Interaktif-tutorial js-php.cn

Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages

JavaScript HTML DOM: Panduan Lengkap

Model Objek Dokumen (DOM) ialah antara muka pengaturcaraan untuk dokumen web. Ia mewakili struktur halaman web sebagai pepohon objek, membolehkan pembangun memanipulasi HTML dan CSS menggunakan JavaScript. Dengan menguasai DOM, anda boleh membuat halaman web yang dinamik dan interaktif.

Apakah itu DOM?

DOM ialah perwakilan berstruktur bagi dokumen HTML. Ia membenarkan JavaScript mengakses dan memanipulasi elemen, atribut dan kandungan halaman web secara dinamik.

Contoh:

Untuk HTML ini:

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Salin selepas log masuk

Mengakses DOM

JavaScript menyediakan kaedah untuk memilih dan memanipulasi elemen DOM.

Kaedah Pemilihan Biasa

getElementById Memilih elemen mengikut IDnya.

   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!

Salin selepas log masuk

getElementsByClassName Memilih elemen mengikut nama kelasnya (mengembalikan koleksi).

   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

Salin selepas log masuk

getElementsByTagName Memilih elemen mengikut nama tegnya (cth., div, p).

   const headings = document.getElementsByTagName("h1");
   console.log(headings[0].innerText);

Salin selepas log masuk

pemilih pertanyaan Memilih elemen pertama yang sepadan dengan pemilih CSS.

   const title = document.querySelector("#title");

Salin selepas log masuk

querySelectorAll Memilih semua elemen yang sepadan dengan pemilih CSS (mengembalikan NodeList).

   const paragraphs = document.querySelectorAll(".description");

Salin selepas log masuk

Manipulasi DOM

Setelah dipilih, anda boleh mengubah suai elemen, atribut dan kandungan secara dinamik.

1. Menukar Kandungan

innerHTML: Menetapkan atau mendapatkan kandungan HTML.

  document.getElementById("title").innerHTML = "Welcome to the DOM!";

Salin selepas log masuk

InnerTeks atau textContent: Menetapkan atau mendapatkan teks biasa.

  document.getElementById("title").innerText = "Hello, World!";

Salin selepas log masuk

2. Menukar Atribut

Gunakan setAttribute dan getAttribute untuk mengubah suai atribut elemen.

  const link = document.querySelector("a");
  link.setAttribute("href", "https://example.com");

Salin selepas log masuk

Ubah suai secara langsung atribut seperti id, className atau src.

  const image = document.querySelector("img");
  image.src = "image.jpg";

Salin selepas log masuk

3. Menukar Gaya

Ubah suai sifat CSS secara langsung.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Salin selepas log masuk

Menambah dan Mengalih Keluar Elemen

1. Menambah Elemen

createElement: Mencipta elemen baharu.
appendChild: Menambahkan elemen pada ibu bapa.

   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!

Salin selepas log masuk

2. Mengalih keluar Elemen

removeChild: Mengalih keluar elemen kanak-kanak.

   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

Salin selepas log masuk

Pengendalian Acara di DOM

Acara ialah tindakan atau kejadian yang dikesan oleh penyemak imbas, seperti klik atau tekanan kekunci.

Menambah Pendengar Acara

Gunakan addEventListener untuk mengikat acara kepada elemen.

   const headings = document.getElementsByTagName("h1");
   console.log(headings[0].innerText);

Salin selepas log masuk

Acara Biasa

Acara Tetikus: klik, dblclick, alih tetikus, keluar tetikus
Acara Papan Kekunci: keydown, keyup
Borang Acara: serahkan, tukar, fokus

Merentasi DOM

Anda boleh menavigasi antara elemen menggunakan perhubungan dalam pepohon DOM.

Ibu bapa dan Anak

parentNode: Mendapatkan nod induk.
childNodes: Menyenaraikan semua nod anak.
kanak-kanak: Menyenaraikan semua elemen kanak-kanak.

   const title = document.querySelector("#title");

Salin selepas log masuk

Adik beradik

nextSibling: Mendapat nod adik beradik seterusnya.
Sibling sebelumnya: Mendapat nod adik-beradik sebelumnya.

Ciri DOM Terperinci

1. Elemen Pengklonan

Buat pendua elemen menggunakan cloneNode.

   const paragraphs = document.querySelectorAll(".description");

Salin selepas log masuk

2. Bekerja dengan Kelas

Gunakan sifat classList untuk memanipulasi kelas.

  document.getElementById("title").innerHTML = "Welcome to the DOM!";

Salin selepas log masuk

3. Menggunakan Templat

Templat HTML membenarkan kandungan boleh diguna semula.

  document.getElementById("title").innerText = "Hello, World!";

Salin selepas log masuk

Amalan Terbaik untuk Manipulasi DOM

Meminimumkan Pengaliran Semula dan Mengecat Semula:
- Perubahan DOM kelompok untuk mengelakkan pemaparan yang berlebihan.
- Gunakan documentFragment untuk berbilang kemas kini.
Gunakan Delegasi Acara:

Lampirkan acara pada elemen induk dan bukannya elemen anak individu.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>



<p>The DOM represents it as:<br>
</p>

<pre class="brush:php;toolbar:false">- Document
  - html
    - head
      - title
    - body
      - h1
      - p

Salin selepas log masuk

Elak JavaScript Sebaris: Gunakan skrip luaran atau addEventListener untuk pemisahan kod yang bersih.

Kesimpulan

JavaScript HTML DOM ialah alat yang berkuasa untuk mencipta halaman web yang dinamik dan interaktif. Dengan menguasai manipulasi DOM, pengendalian acara dan amalan terbaik, pembangun boleh membina aplikasi responsif dan mesra pengguna yang meningkatkan keseluruhan pengalaman pengguna.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Menguasai JavaScript HTML DOM: Membina Halaman Web Dinamik dan Interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!