JavaScript DOM 常見屬性介紹:給新手的指南

更新日期: 2024 年 10 月 23 日

在前端開發中,JavaScript 與 DOM(Document Object Model)密不可分。

DOM 是瀏覽器用來表示 HTML 文件的模型,我們可以通過 JavaScript 操作這個模型來動態更新網頁內容。

這篇文章將介紹一些 JavaScript 操作 DOM 的常見屬性,幫助新手了解如何與 DOM 互動。


什麼是 DOM?

DOM 是網頁的結構化表示,它將 HTML 文件作為樹狀結構進行組織,每個 HTML 標籤都是一個節點(Node)。

通過 DOM,我們可以使用 JavaScript 獲取、修改、添加或刪除 HTML 元素,實現動態網頁交互。


常見的 DOM 屬性

以下是一些 JavaScript 操作 DOM 時最常用的屬性和方法。

掌握這些屬性可以讓你更靈活地控制網頁內容和結構。


innerHTML

innerHTML 是最常用的屬性之一,它用來讀取或修改 HTML 元素的內容。

通過 innerHTML,我們可以快速更新頁面中的 HTML 內容。

範例:

// 獲取元素的 HTML 內容
const element = document.getElementById('myElement');
console.log(element.innerHTML);

// 修改元素的 HTML 內容
element.innerHTML = '<p>這是新的內容</p>';

在這裡,innerHTML 會將 myElement 內部的所有 HTML 內容替換為新的內容。


textContent

textContent 是一個用來讀取或設置元素內的純文本內容屬性,它不會解析或影響 HTML 標籤。

這在你只想操作文本時非常有用。

範例:

// 獲取元素的文本內容
const element = document.getElementById('myElement');
console.log(element.textContent);

// 修改元素的文本內容
element.textContent = '這是新的純文本內容';

innerHTML 不同,textContent 不會處理 HTML,這使它在操作純文本時更安全。


className

className 屬性用來獲取或設置元素的 class 屬性。

這對於動態添加或移除 CSS 樣式非常有用。

範例:

// 獲取元素的 class
const element = document.getElementById('myElement');
console.log(element.className);

// 修改元素的 class
element.className = 'new-class';

這可以讓你直接操作元素的 class,從而影響它的樣式。


id

id 屬性用來讀取或設置元素的 id 屬性。

在 JavaScript 中,我們經常使用 id 來唯一地標識頁面中的某個元素。

範例:

// 獲取元素的 id
const element = document.getElementById('myElement');
console.log(element.id);

// 修改元素的 id
element.id = 'newId';

透過修改 id,你可以重新標識該元素,進而使用它進行更多 DOM 操作。


style

style 屬性允許你直接操作元素的內聯樣式。

這是一種快速修改元素樣式的方式,但請注意,這僅影響該元素的內聯樣式。

範例:

// 獲取元素的內聯樣式
const element = document.getElementById('myElement');
console.log(element.style.backgroundColor);

// 修改元素的內聯樣式
element.style.backgroundColor = 'blue';

雖然你可以使用 style 來修改樣式,但更推薦使用 classNameclassList 來添加或移除樣式,這樣可以保持樣式管理的清晰性。


children

children 屬性返回一個包含所有子元素的 HTMLCollection。

這個屬性可以用來遍歷,或操作某個元素的所有子節點。

範例:

const parentElement = document.getElementById('parent');
const children = parentElement.children;

for (let i = 0; i < children.length; i++) {
  console.log(children[i]);
}

這樣你可以遍歷某個元素的所有子元素,並進行進一步的操作。


parentElement

parentElement 屬性返回元素的父節點。

這對於需要向上遍歷 DOM 樹結構來操作父元素時非常有用。

範例:

const childElement = document.getElementById('child');
const parent = childElement.parentElement;

console.log(parent);

這可以幫助你獲取並操作元素的父節點。


getAttribute()setAttribute()

這兩個方法用來獲取和設置元素的屬性。

當你需要讀取或修改元素的某些特定屬性時,它們非常有用。

範例:

const element = document.getElementById('myElement');

// 獲取屬性
const hrefValue = element.getAttribute('href');
console.log(hrefValue);

// 設置屬性
element.setAttribute('href', 'https://www.example.com');

這種方法比直接使用屬性(如 idclass)更加靈活,適用於任意屬性。


classList

classList 屬性提供了一個用來操作元素 class 的方法集合。

它比 className 更加方便和強大,因為它提供了添加、移除和切換 class 的功能。

範例:

const element = document.getElementById('myElement');

// 添加 class
element.classList.add('new-class');

// 移除 class
element.classList.remove('old-class');

// 切換 class
element.classList.toggle('active');

使用 classList 可以更靈活地管理元素的 CSS 類別。


結論

這篇文章介紹了一些操作 JavaScript DOM 的常見屬性和方法。

掌握這些基礎屬性是開始進行前端開發的重要一步,它們能幫助你動態操作 HTML 元素,讓網頁更具互動性。

隨著你對 DOM 的理解加深,你會發現這些屬性可以組合起來,實現各種豐富的效果。

多加練習,這些 DOM 操作將成為你開發動態網站時的重要工具!

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *