自定義屬性（Custom Attributes） 允許在標準 HTML 屬性之外，為元素添加額外的元數據（metadata）。
1. 標準方式：data-* 屬性
HTML5 引入了 data-* 前綴的自定義屬性規范，所有以 data- 開頭的屬性都會被瀏覽器視為自定義數據。
基本語法：
<div id="user" data-id="123" data-name="張三" data-is-admin="true">用戶信息
</div>
- 可訪問性：可通過 JavaScript 的
dataset屬性訪問。
2. JavaScript 訪問 data-* 屬性
可以通過 element.dataset 對象訪問 data-* 屬性的值：
示例：
const userElement = document.getElementById('user');// 獲取 data-id 屬性值（自動轉換為駝峰命名）
const userId = userElement.dataset.id; // "123"// 獲取 data-is-admin 屬性值
const isAdmin = userElement.dataset.isAdmin; // "true"（字符串類型）// 修改屬性值
userElement.dataset.age = '28'; // 會創建 data-age="28"// 刪除屬性
delete userElement.dataset.name; // 移除 data-name
注意事項：
- 命名轉換：
data-*中的連字符（如data-first-name）會自動轉換為駝峰命名（dataset.firstName）。 - 數據類型：所有值都以字符串形式存儲，如需其他類型需手動轉換（如
parseInt）。
3. 實際應用場景
（1）組件化數據傳遞
在自定義組件中存儲配置信息：
<video-player data-src="video.mp4" data-autoplay="false"></video-player>
（2）DOM 與數據綁定
在列表渲染中關聯數據 ID：
<ul><li data-item-id="1">項目 1</li><li data-item-id="2">項目 2</li>
</ul>
（3）事件驅動邏輯
在按鈕中存儲操作類型：
<button data-action="delete">刪除</button>
<button data-action="edit">編輯</button>
document.querySelectorAll('[data-action]').forEach(button => {button.addEventListener('click', () => {const action = button.dataset.action;// 根據 action 執行不同邏輯});
});
4. 非標準自定義屬性
除了 data-*，HTML 還允許使用非標準的自定義屬性，但存在一些限制：
<div my-custom-attr="value">非標準屬性</div>
訪問方式：
const div = document.querySelector('div');// 使用 getAttribute/setAttribute
const value = div.getAttribute('my-custom-attr'); // "value"
div.setAttribute('my-custom-attr', 'new-value');// 直接訪問（不推薦，可能不被所有瀏覽器支持）
div.myCustomAttr; // undefined（非標準方式）
注意事項：
- 驗證問題：HTML 驗證工具可能報錯。
- 樣式兼容性：無法通過 CSS 選擇器直接匹配（如
[my-custom-attr]）。 - 最佳實踐：盡量使用
data-*屬性而非非標準屬性。
5. 自定義屬性 vs. 其他存儲方式
| 存儲方式 | 優點 | 缺點 | 適用場景 |
|---|---|---|---|
data-* 屬性 | 標準化、語義化、DOM 中可見 | 只能存儲字符串類型 | 簡單數據傳遞 |
element.id | 快速訪問 | 只能存儲字符串且需全局唯一 | 元素標識 |
element.classList | 可用于樣式切換 | 只能存儲字符串數組 | 狀態標記 |
element.setAttribute | 靈活存儲任意屬性 | 非標準化，可能影響驗證 | 臨時數據存儲 |
| JavaScript 變量 | 無類型限制，可存儲復雜對象 | 與 DOM 無直接關聯 | 復雜邏輯處理 |
注意
- 優先使用
data-*：避免使用非標準自定義屬性。 - 保持屬性名簡潔：如
data-user-id而非data-the-id-of-the-current-user。 - 避免敏感數據：不要在自定義屬性中存儲密碼、token 等敏感信息。
- 結合組件化：在自定義組件中使用
data-*傳遞配置參數。 - 數據類型轉換：使用時注意將字符串轉換為合適的類型（如
Number()、JSON.parse()）。
)
