使用 JavaScript 的 dataset 屬性：為 HTML 元素動態添加自訂屬性

更新日期： 2024 年 11 月 14 日

在前端開發中，dataset 屬性為我們提供了一種簡單而高效的方式，讓 JavaScript 可以直接為 HTML 元素插入自訂屬性值，以此實現靈活的元素辨別與操作。

透過 dataset，我們能在不改變 HTML 結構的情況下，動態地管理不同的 DOM 元素。

本文將深入探討如何使用 JavaScript 的 dataset 屬性來操作 HTML，從而增強前端對元素的控制能力。

什麼是 dataset 屬性？

dataset 是 JavaScript 物件的一部分，它可以存取元素中所有以 data- 開頭的屬性，這些屬性稱為「自訂數據屬性」。

使用 dataset，我們可以為 DOM 元素設置自訂屬性值，並用 JavaScript 方便地讀取或修改這些屬性。

以下範例展示了如何在 HTML 中使用自訂數據屬性：

<div class="card" data-id="1" data-category="news"></div>

在這個範例中，data-id 和 data-category 就是 dataset 的屬性，可以使用 JavaScript 來讀取和更新它們的值。

使用 dataset 動態插入屬性值

在 JavaScript 中，我們可以通過 element.dataset 操作 DOM 元素的 data- 屬性。

這樣可以動態地為 HTML 元素設置屬性值，實現對元素的辨別和篩選。

插入自訂屬性值的基本語法

使用 dataset 插入或修改屬性值的語法非常簡潔，以下是基本的操作方式：

const element = document.querySelector('.card');

// 設置自訂屬性
element.dataset.id = "1";
element.dataset.category = "news";

// 獲取自訂屬性
console.log(element.dataset.id); // 輸出: "1"
console.log(element.dataset.category); // 輸出: "news"

在這裡，我們使用 dataset 為 .card 元素設定了 id 和 category 屬性值，這些值可用於辨識不同的卡片元素。

動態插入多個自訂屬性值

當網頁中有多個相似的元素，例如商品列表或卡片區域時，可以使用 dataset 為每個元素插入唯一的屬性值來進行辨別。

例如，我們有一組 card 元素，每個元素表示不同的內容：

我們可以使用 JavaScript 循環來動態為每個 card 元素設置自訂屬性：

const cards = document.querySelectorAll('.card');

cards.forEach((card, index) => {
  card.dataset.order = index + 1; // 為每個元素新增 data-order 屬性
});

<div class="card" data-id="1" data-category="news"></div>
<div class="card" data-id="2" data-category="sports"></div>
<div class="card" data-id="3" data-category="entertainment"></div>

在這個例子中，data-order 屬性被動態插入至每個 card 元素中，用於標識每個元素的順序。

這樣可以通過 data-order 屬性在 JavaScript 中篩選和操作特定元素。

使用 dataset 操作與篩選元素

在特定情境下，dataset 也可以幫助我們根據屬性值篩選出符合條件的元素，進行進一步的操作。

例如，我們可以根據 data-category 屬性來篩選和操作屬於特定分類的元素。

// 選擇所有卡片元素
const cards = document.querySelectorAll('.card');

// 篩選出 category 為 "news" 的卡片
const newsCards = Array.from(cards).filter(card => card.dataset.category === "news");

// 為每張 news 類別的卡片添加樣式
newsCards.forEach(card => {
  card.style.border = "2px solid blue";
});

在這段程式碼中，我們篩選出 data-category 為 “news” 的所有卡片，並為這些卡片添加了邊框樣式。

這樣的篩選方式對於大量相似元素的操作非常實用。

dataset 應用場景：識別特定元素並執行操作

使用 dataset 的一大優勢在於，它允許開發人員動態地為元素設置特定屬性，並根據這些屬性值對元素進行篩選與操作。常見的應用場景包括：

• 商品列表的篩選和排序：在商品頁面上，可以使用 data-id、data-price 等屬性，根據使用者選擇的條件來篩選出符合的商品。
• 頁面內容的狀態追蹤：透過 data-status 或 data-state 等屬性，可以方便地追蹤和切換元素的狀態（例如顯示或隱藏）。
• 前端與後端資料的綁定：前端的 HTML 元素可以作為後端資料的載體，例如根據後端數據動態設定 data-* 屬性，讓前端操作對應的資料元素。

總結

JavaScript 的 dataset 屬性為前端開發提供了一種靈活且高效的方式來操作 HTML 元素。

在不改變 HTML 結構的情況下，我們可以通過 dataset 動態地插入自訂屬性值，並使用這些屬性來辨識和篩選不同的元素。

這種技術在處理大量相似元素、動態顯示資料及狀態管理等場景中尤為實用。