cari

Rumah >hujung hadapan web >tutorial js >Menguasai JavaScript HTML DOM: Membina Halaman Web Dinamik dan Interaktif

Menguasai JavaScript HTML DOM: Membina Halaman Web Dinamik dan Interaktif

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-20 02:57:12358semak imbas

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

Mengakses DOM

JavaScript menyediakan kaedah untuk memilih dan memanipulasi elemen DOM.

Kaedah Pemilihan Biasa

  1. getElementById Memilih elemen mengikut IDnya. 
   const title = document.getElementById("title");
   console.log(title.innerText); // Output: Hello, DOM!
  1. getElementsByClassName Memilih elemen mengikut nama kelasnya (mengembalikan koleksi). 
   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);
  1. getElementsByTagName Memilih elemen mengikut nama tegnya (cth., div, p). 
   const headings = document.getElementsByTagName("h1");
   console.log(headings[0].innerText);
  1. pemilih pertanyaan Memilih elemen pertama yang sepadan dengan pemilih CSS. 
   const title = document.querySelector("#title");
  1. querySelectorAll Memilih semua elemen yang sepadan dengan pemilih CSS (mengembalikan NodeList). 
   const paragraphs = document.querySelectorAll(".description");

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!";
  • InnerTeks atau textContent: Menetapkan atau mendapatkan teks biasa. 
  document.getElementById("title").innerText = "Hello, World!";

2. Menukar Atribut

  • Gunakan setAttribute dan getAttribute untuk mengubah suai atribut elemen. 
  const link = document.querySelector("a");
  link.setAttribute("href", "https://example.com");
  • Ubah suai secara langsung atribut seperti id, className atau src. 
  const image = document.querySelector("img");
  image.src = "image.jpg";

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

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!

2. Mengalih keluar Elemen

  • removeChild: Mengalih keluar elemen kanak-kanak. 
   const paragraphs = document.getElementsByClassName("description");
   console.log(paragraphs[0].innerText);

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

Acara Biasa

  1. Acara Tetikus: klik, dblclick, alih tetikus, keluar tetikus
  2. Acara Papan Kekunci: keydown, keyup
  3. 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");

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

2. Bekerja dengan Kelas

Gunakan sifat classList untuk memanipulasi kelas.

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

3. Menggunakan Templat

Templat HTML membenarkan kandungan boleh diguna semula.

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

Amalan Terbaik untuk Manipulasi DOM

  1. Meminimumkan Pengaliran Semula dan Mengecat Semula:

    • Perubahan DOM kelompok untuk mengelakkan pemaparan yang berlebihan.
    • Gunakan documentFragment untuk berbilang kemas kini.

  2. 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
  1. 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!

JavaScript batch css html Object for select using class Interface Property Event Collection dom this innerHTML 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：Demystifying Destructuring Assignment dalam JavaScriptArtikel seterusnya：Demystifying Destructuring Assignment dalam JavaScript

Artikel berkaitan

Lihat lagi