在一個充滿 React、Vue 和 Angular 等框架和函式庫的世界中,很容易忽略掌握普通 JavaScript 中 DOM 操作的重要性。但了解文件物件模型 (DOM) 的基礎知識以及如何直接使用它仍然非常有價值。在本指南中,我們將探討 DOM 操作的基礎知識、關鍵方法,以及為什麼它值得了解,即使有這麼多的框架。
想像你的網頁是一個房間,每個元素都是一件家具。 DOM 操作 就像重新排列家具 - 您直接更改佈局、移動事物、添加新元素,甚至刪除它們。掌握這些變更對於理解網頁的建構方式和向使用者顯示的方式至關重要。
框架可以為您處理這些更改,但了解如何自行操作 DOM 可以讓您更好地控制並更深入地了解事物在幕後的工作方式。
JavaScript 提供了多種與 DOM 互動的內建方法。讓我們來看看一些最常用的,看看它們是如何運作的。
在 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
這些方法可讓您使用 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 });
要為頁面新增元素,請使用 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
要刪除元素,如果有對父元素的引用,可以使用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
您也可以使用 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
要更改元素的 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
事件監聽器透過允許元素回應使用者操作來使您的頁面具有互動性。
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 操作更簡單、更有效率:
範例:假設您有一個顯示或隱藏某些文字的按鈕。對於這樣簡單的任務,原生 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 和 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 就能取得多少成果!
如果您喜歡這篇文章,請考慮支持我的工作:
以上是掌握 Vanilla JavaScript 中的 DOM 操作:為什麼它仍然很重要的詳細內容。更多資訊請關注PHP中文網其他相關文章!