Manipulasi DOM: Memilih dan Memanipulasi Elemen DOM

Pengenalan kepada DOM

Model Objek Dokumen (DOM) ialah konsep penting untuk pembangunan web. Ia berfungsi sebagai antara muka pengaturcaraan yang membolehkan pembangun berinteraksi dan mengubah suai struktur, gaya dan kandungan halaman web. Apabila halaman web dimuatkan dalam penyemak imbas, dokumen HTML ditukar kepada DOM, struktur seperti pepohon di mana setiap nod mewakili elemen, atribut atau teks. Struktur ini membolehkan pembangun mengakses dan memanipulasi bahagian halaman secara dinamik, menjadikan pengalaman web lebih interaktif dan menarik.

Untuk pemula dan mereka yang tidak biasa dengan DOM, anggap ia sebagai pelan tindakan rumah. Sama seperti anda boleh menyusun semula perabot atau mengecat dinding di dalam rumah, DOM membolehkan anda menukar kandungan dan gaya halaman web selepas ia dimuatkan.

Memilih Elemen

Sebelum anda boleh memanipulasi DOM, anda perlu memilih elemen yang anda ingin bekerjasama. JavaScript menyediakan beberapa kaedah untuk memilih elemen, membolehkan anda berinteraksi dengan bahagian halaman web yang berlainan. Berikut ialah beberapa kaedah biasa:

1. Memilih Elemen mengikut ID

Kaedah getElementById ialah salah satu cara paling mudah untuk memilih satu elemen. Ia mengembalikan elemen yang sepadan dengan ID yang ditentukan.

// Selecting an element by ID
const heading = document.getElementById('heading');

Dalam contoh ini, tajuk kini akan merujuk elemen dengan ID tajuk. Anda boleh menggunakan rujukan ini untuk memanipulasi elemen dengan lebih lanjut.

2. Memilih Elemen mengikut Nama Kelas

Untuk memilih berbilang elemen dengan kelas yang sama, anda boleh menggunakan kaedah getElementsByClassName. Kaedah ini mengembalikan HTMLKoleksi elemen secara langsung.

// Selecting elements by class name
const items = document.getElementsByClassName('item');

Pembolehubah item kini akan menyimpan koleksi semua elemen dengan item nama kelas. Kaedah ini amat berguna apabila anda perlu menggunakan tindakan yang sama pada berbilang elemen.

3. Memilih Elemen Menggunakan Pemilih CSS

Kaedah querySelector dan querySelectorAll membolehkan anda memilih elemen menggunakan pemilih CSS. Kaedah ini serba boleh dan boleh digunakan untuk menyasarkan elemen mengikut nama teg, kelas, ID atau mana-mana pemilih CSS yang sah.

// Selecting a single element using a CSS selector
const button = document.querySelector('button');

// Selecting multiple elements using a CSS selector
const listItems = document.querySelectorAll('li');

querySelector memilih elemen pertama yang sepadan dengan pemilih, manakala querySelectorAll memilih semua elemen yang sepadan dan mengembalikan NodeList, yang serupa dengan tatasusunan.

Memanipulasi Elemen

Setelah anda memilih elemen, anda boleh memanipulasinya untuk menukar kandungan, atribut dan gayanya. Ini membolehkan anda membuat halaman web dinamik yang bertindak balas kepada interaksi pengguna atau acara lain.

1. Menukar Kandungan Teks

Sifat textContent membolehkan anda menukar teks dalam elemen. Ini berguna untuk mengemas kini kandungan secara dinamik berdasarkan input pengguna atau syarat lain.

// Changing text content
heading.textContent = 'Hello, World!';

Dalam contoh ini, teks di dalam elemen yang dirujuk oleh tajuk akan dikemas kini kepada "Hello, World!".

2. Menukar Atribut

Kaedah setAttribute membolehkan anda mengubah suai atribut elemen, seperti src, href, alt atau dilumpuhkan.

// Changing an attribute
button.setAttribute('disabled', true);

Di sini, butang dilumpuhkan dengan menetapkan atribut dilumpuhkan kepada benar. Ini boleh digunakan untuk menghalang interaksi pengguna sehingga syarat tertentu dipenuhi.

3. Menukar Gaya

Sifat gaya membolehkan anda mengubah suai gaya CSS sebaris sesuatu elemen. Anda boleh menukar sifat seperti warna, warna latar belakang, Saiz fon dan banyak lagi.

// Changing styles
heading.style.color = 'blue';

Dalam contoh ini, warna teks dalam elemen tajuk ditukar kepada biru.

Mencipta dan Mengeluarkan Elemen

Selain mengubah suai elemen sedia ada, anda boleh mencipta elemen baharu dan menambahkannya pada DOM, atau mengalih keluar elemen yang tidak diperlukan lagi.

1. Mencipta Elemen Baharu

Anda boleh mencipta elemen baharu menggunakan kaedah createElement. Setelah dibuat, anda boleh menetapkan sifatnya dan menambahkannya pada elemen sedia ada dalam DOM.

// Creating a new element
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph.';
document.body.appendChild(newElement);

Dalam contoh ini,

elemen dicipta, kandungan teksnya ditetapkan dan ia ditambah pada penghujung elemen.

2. Mengeluarkan Unsur

Untuk mengalih keluar elemen daripada DOM, anda boleh menggunakan kaedah alih keluar. Ini amat berguna untuk mengurus kandungan pada halaman anda secara dinamik.

// Removing an element
const oldElement = document.getElementById('old-element');
oldElement.remove();

Di sini, elemen dengan elemen lama ID dialih keluar daripada DOM, dengan berkesan memadamkannya daripada halaman web.

Contoh Dunia Nyata: Senarai Tugasan

Untuk melihat konsep ini dalam tindakan, mari bina aplikasi Senarai Tugasan yang mudah. Contoh ini akan menunjukkan cara memilih dan memanipulasi elemen DOM dalam senario dunia sebenar.

HTML Structure

First, let's create the HTML structure for our To-Do List.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do List</title>
</head>
<body>
  <h1 id="heading">To-Do List</h1>
  <ul id="todo-list"></ul>
  <input type="text" id="new-todo" placeholder="New to-do">
  <button id="add-todo">Add To-Do</button>
</body>
</html>

In this structure:

• We have a heading (

  ) with an ID of heading.

• An unordered list (
  ) with an ID of todo-list, where our to-do items will be displayed.
  • An input field for adding new to-do items, with an ID of new-todo.
  • A button with an ID of add-todo to add new items to the list.

  JavaScript for Interactivity

  Next, we'll add some JavaScript to make the To-Do List interactive.
  

  <script>
    // Selecting elements
    const todoList = document.getElementById('todo-list');
    const newTodoInput = document.getElementById('new-todo');
    const addTodoButton = document.getElementById('add-todo');
  
    // Adding a new to-do item
    addTodoButton.addEventListener('click', () => {
      const newTodoText = newTodoInput.value;
      if (newTodoText === '') return; // Prevent adding empty to-do items
  
      // Create a new list item
      const newTodoItem = document.createElement('li');
      newTodoItem.textContent = newTodoText;
  
      // Append the new item to the list
      todoList.appendChild(newTodoItem);
  
      // Clear the input field
      newTodoInput.value = '';
    });
  </script>
  

  Explanation:

  1. Selecting Elements: We begin by selecting the necessary elements using their IDs.
  2. Event Listener: We add a click event listener to the "Add To-Do" button. When clicked, the event listener function is triggered.
  3. Input Validation: Inside the function, we first check if the input field is empty to prevent adding empty to-do items.
  4. Creating a New Element: If the input is not empty, we create a new
  5. element and set its text content to the value entered in the input field.
  6. Appending the New Item: The new
  7. is then appended to the existing
     element.
     • Clearing the Input Field: Finally, the input field is cleared, ready for the next to-do item.

  This simple application demonstrates the power of DOM manipulation in creating interactive and dynamic web pages.

  Conclusion

  DOM manipulation is a fundamental skill for any web developer. By understanding how to select and manipulate DOM elements, you can create web pages that are not only static but also responsive to user interactions. The examples provided in this article serve as a foundation for more advanced topics, such as event handling, animations, and dynamic content loading.

  By practicing these techniques and applying them to real-world scenarios, you'll gain a deeper understanding of how the web works and be well on your way to mastering front-end development.

  Atas ialah kandungan terperinci Manipulasi DOM: Memilih dan Memanipulasi Elemen DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!