首頁 >web前端 >js教程 >DOM 操作：選擇與操作 DOM 元素

DOM 操作：選擇與操作 DOM 元素

PHPz原創: 2024-08-09 12:34:321022瀏覽

DOM Manipulation: Selecting and Manipulating DOM Elements

DOM 簡介

文件物件模型 (DOM) 是 Web 開發的重要概念。它作為一個編程接口，允許開發人員與網頁進行互動並修改網頁的結構、樣式和內容。當瀏覽器載入網頁時，HTML 文件會轉換為 DOM，這是一種樹狀結構，其中每個節點代表一個元素、屬性或文字。這種結構使開發人員能夠動態存取和操作頁面的各個部分，從而使 Web 體驗更具互動性和吸引力。

對於初學者和不熟悉 DOM 的人，可以將其視為房屋的藍圖。就像您可以重新佈置房屋中的家具或粉刷牆壁一樣，DOM 可以讓您在載入網頁後更改網頁的內容和樣式。

選擇元素

在操作 DOM 之前，您需要選擇要使用的元素。 JavaScript 提供了多種選擇元素的方法，可讓您與網頁的不同部分互動。以下是一些常用的方法：

1. 透過ID選擇元素

getElementById 方法是選擇單一元素最直接的方法之一。它會傳回與指定 ID 相符的元素。

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

在此範例中，標題現在將引用具有標題 ID 的元素。您可以使用此引用來進一步操作該元素。

2. 按類別名稱選擇元素

要選擇具有相同類別的多個元素，可以使用 getElementsByClassName 方法。此方法傳回元素的即時 HTMLCollection。

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

items 變數現在將保存類別名為 item 的所有元素的集合。當您需要對多個元素套用相同的操作時，此方法特別有用。

3. 使用 CSS 選擇器選擇元素

querySelector 和 querySelectorAll 方法可讓您使用 CSS 選擇器選擇元素。這些方法用途廣泛，可用於透過標籤名稱、類別、ID 或任何其他有效的 CSS 選擇器來定位元素。

// 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 選擇第一個與選擇器相符的元素，而 querySelectorAll 選擇所有符合的元素並傳回一個 NodeList，類似於陣列。

操縱元素

選擇一個元素後，您可以操作它來變更其內容、屬性和樣式。這允許您建立響應用戶互動或其他事件的動態網頁。

1. 更改文字內容

textContent 屬性可讓您變更元素內的文字。這對於根據使用者輸入或其他條件動態更新內容非常有用。

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

在此範例中，標題引用的元素內的文字將更新為「Hello, World!」。

2. 更改屬性

setAttribute 方法可讓您修改元素的屬性，例如 src、href、alt 或停用。

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

這裡，透過將disabled屬性設為true來停用該按鈕。這可用於阻止使用者交互，直到滿足特定條件。

3.改變風格

style 屬性可讓您修改元素的內嵌 CSS 樣式。您可以變更顏色、背景顏色、字體大小等屬性。

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

在此範例中，標題元素內的文字顏色變更為藍色。

建立和刪除元素

除了修改現有元素之外，您還可以建立新元素並將其新增至 DOM，或刪除不再需要的元素。

1. 建立新元素

您可以使用 createElement 方法建立一個新元素。建立後，您可以設定其屬性並將其附加到 DOM 中的現有元素。

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

在此範例中，一個新的

建立元素，設定其文字內容，並將其新增至

的末端。元素。

2. 刪除元素

要從 DOM 移除元素，可以使用remove方法。這對於動態管理頁面上的內容特別有用。

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

這裡，ID 為 old-element 的元素將從 DOM 中刪除，從而有效地將其從網頁中刪除。

現實世界的例子：待辦事項列表

要了解這些概念的實際應用，讓我們建立一個簡單的待辦事項清單應用程式。此範例將示範如何在現實場景中選擇和操作 DOM 元素。

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 (
- 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
  - 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.

以上是DOM 操作：選擇與操作 DOM 元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html Static Array Object if for while select using class Interface finally Attribute Property Event Collection append function dom this href input ul li Access Foundation

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：為 Reddit API 建立 Node.js 包裝器：逐步指南下一篇：為 Reddit API 建立 Node.js 包裝器：逐步指南

看更多