掌握 Vanilla JavaScript 中的 DOM 操作：為什麼它仍然很重要

在一個充滿 React、Vue 和 Angular 等框架和函式庫的世界中，很容易忽略掌握普通 JavaScript 中 DOM 操作的重要性。但了解文件物件模型 (DOM) 的基礎知識以及如何直接使用它仍然非常有價值。在本指南中，我們將探討 DOM 操作的基礎知識、關鍵方法，以及為什麼它值得了解，即使有這麼多的框架。

簡介：DOM 操作就像是重新佈置家具

想像你的網頁是一個房間，每個元素都是一件家具。 DOM 操作 就像重新排列家具 - 您直接更改佈局、移動事物、添加新元素，甚至刪除它們。掌握這些變更對於理解網頁的建構方式和向使用者顯示的方式至關重要。

框架可以為您處理這些更改，但了解如何自行操作 DOM 可以讓您更好地控制並更深入地了解事物在幕後的工作方式。

DOM 操作的常用方法

getElementById、querySelector 等

JavaScript 提供了多種與 DOM 互動的內建方法。讓我們來看看一些最常用的，看看它們是如何運作的。

1.透過Id獲取元素

在 DOM 中選擇元素的最簡單方法是透過其 ID。此方法傳回具有指定 ID 的第一個元素。

const element = document.getElementById('myElement');
element.style.color = 'blue'; // Changes the text color to blue
element.textContent = 'Hello, world!'; // Updates the text content

2.querySelector和querySelectorAll

這些方法可讓您使用 CSS 選擇器選擇元素。 querySelector 傳回與選擇器相符的第一個元素，而 querySelectorAll 傳回所有符合元素的 NodeList。

const singleElement = document.querySelector('.myClass'); // Selects first element with myClass
singleElement.style.fontSize = '20px'; // Changes font size

const multipleElements = document.querySelectorAll('.myClass'); // Selects all elements with myClass
multipleElements.forEach(element => {
  element.style.backgroundColor = 'lightgray'; // Sets background color for each element
});

3.createElement、appendChild 和 insertBefore

要為頁面新增元素，請使用 createElement 來建立新的 DOM 元素，並使用appendChild 將其新增至現有元素中。您也可以使用 insertBefore 在特定位置新增元素。

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph!';
document.body.appendChild(newElement); // Adds the new paragraph at the end of body

// Inserting an element before another
const container = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = 'Inserted before existing content';
container.insertBefore(newDiv, container.firstChild); // Inserts newDiv before the first child

4.removeChild並刪除

要刪除元素，如果有對父元素的引用，可以使用removeChild，或直接在元素上使用remove方法。

// Using removeChild
const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child); // Removes childElement from parentElement

// Using remove directly
const elementToRemove = document.getElementById('removeMe');
elementToRemove.remove(); // Removes the element directly

5. 修改屬性

您也可以使用 setAttribute、getAttribute 和 removeAttribute 等方法來操作屬性。

const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com'); // Sets the href attribute
link.setAttribute('target', '_blank'); // Opens link in a new tab
console.log(link.getAttribute('href')); // Retrieves the href attribute
link.removeAttribute('target'); // Removes the target attribute

6. 直接改變樣式

要更改元素的 CSS 樣式，您可以使用 style 屬性。

const element = document.getElementById('myElement');
element.style.color = 'blue'; // Changes the text color to blue
element.textContent = 'Hello, world!'; // Updates the text content

7. 新增事件監聽器

事件監聽器透過允許元素回應使用者操作來使您的頁面具有互動性。

const singleElement = document.querySelector('.myClass'); // Selects first element with myClass
singleElement.style.fontSize = '20px'; // Changes font size

const multipleElements = document.querySelectorAll('.myClass'); // Selects all elements with myClass
multipleElements.forEach(element => {
  element.style.backgroundColor = 'lightgray'; // Sets background color for each element
});

何時使用 DOM 操作

Vanilla DOM 操作大放異彩的實際場景

雖然框架處理大部分繁重的工作，但有時普通 DOM 操作更簡單、更有效率：

• 小型項目：對於簡單的頁面或小型項目，使用普通 JavaScript 通常比載入整個框架更快、更輕。
• 學習與實驗：掌握 DOM 操作可以幫助您了解 Web 的工作原理，為您以後學習框架奠定基礎。
• 效能最佳化：直接 DOM 操作有時比框架驅動的更新更快，特別是對於特定的一次性變更。

範例：假設您有一個顯示或隱藏某些文字的按鈕。對於這樣簡單的任務，原生 JavaScript 效率更高：

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph!';
document.body.appendChild(newElement); // Adds the new paragraph at the end of body

// Inserting an element before another
const container = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = 'Inserted before existing content';
container.insertBefore(newDiv, container.firstChild); // Inserts newDiv before the first child

使用框架，這將需要設定狀態和重新渲染邏輯，這對於像這樣的小任務來說有點過分了。

替代方案：React、Vue，以及為什麼 Vanilla 仍然佔有一席之地

框架與普通 JavaScript

React、Vue 和 Angular 等框架透過為您處理更新和狀態更改，使 DOM 操作變得更容易。他們使用虛擬 DOM 更有效地管理流程，只更新需要更改的內容。

但事情是這樣的：框架是有開銷的。如果您正在建造一個小型項目，那麼額外的重量可能不值得。此外，即使您主要使用框架，了解普通 DOM 操作也能讓您成為更好的開發人員。了解幕後發生的情況有助於您排除故障、優化並做出明智的決策。

範例：假設您想要為元素新增工具提示。以下是使用普通 JavaScript 的方法：

// Using removeChild
const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child); // Removes childElement from parentElement

// Using remove directly
const elementToRemove = document.getElementById('removeMe');
elementToRemove.remove(); // Removes the element directly

使用原生 JavaScript，您可以精確控制工具提示的位置和行為，而無需任何框架依賴。

結論：回到基礎以便更好地理解

掌握原生 JavaScript 中的 DOM 操作就像在使用精美小工具之前學習烹飪基礎知識一樣。它為您提供了堅實的基礎，使您更加多才多藝，並幫助您了解框架為您所做的事情。雖然框架使 DOM 操作變得更容易，但了解如何直接使用 DOM 對於調試、優化和建立較小的專案非常有價值。

所以，下次當您想要使用框架時，請嘗試普通 JavaScript。您可能會驚訝於它的強大和簡單。

---

準備好動手操作 DOM 了嗎？ 在您的下一個專案中嘗試這些技術，看看僅使用普通 JavaScript 就能取得多少成果！

---

如果您喜歡這篇文章，請考慮支持我的工作：

• 請我喝杯咖啡
• 預約電話尋求指導或職業建議
• 在 Twitter 上追蹤我
• 在 LinkedIn 上聯絡

以上是掌握 Vanilla JavaScript 中的 DOM 操作：為什麼它仍然很重要的詳細內容。更多資訊請關注PHP中文網其他相關文章！