HTMLDataset詳解

在 HTML 中，每個元素都有它自己的 屬性 (attributes)。這些屬性可以被獲取、設置或者刪除。

一、掌握HTMLDataset

HTML DOM 提供了一種更好的方法來訪問元素的屬性。通過使用 HTML DOM，可以輕鬆訪問任何元素的屬性，並修改它們。

其中，HTML DOM 的 dataset 屬性允許存儲數據在自定義屬性中。這些數據可以通過JavaScript進行操作、讀取和寫入，被稱為 HTML5 自定義數據屬性。在每個元素中，使用 data- 前綴添加自定義屬性，可以輕鬆存儲元素私有數據：

<div id="myDiv" data-myattribute="somevalue"></div> 

// 通過以下方式，可以讀取自定義屬性的值
var div = document.querySelector('#myDiv'); 
var value = div.dataset.myattribute; 
alert(value); // 輸出 "somevalue"

HTMLDataset 代碼解釋：

1. 在代碼中<div>定義了一個自定義屬性，數據存儲在 data-myattribute 屬性中。
2. 通過 JavaScript 中的 document.querySelector() 方法，我們可以獲取匹配的元素，在本例中為 div 元素。
3. 通過元素的 dataset 屬性，我們可以訪問自定義的數據屬性。數據屬性名稱後面不需要添加 “data-” 前綴。
4. 其中，dataset 對象上的每個屬性都對應於該元素上的一個自定義數據屬性。

二、HTMLDataset 與 CSS

HTMLDataset 可以使用 JavaScript 操作元素屬性，還可以通過css添加樣式，為自定義屬性設置樣式：

/*CSS中為data-id屬性設置樣式*/
li[data-id="123"] { 
  font-size: 16px; 
  font-weight: bold; 
  color: blue;
}

HTMLDataset 與 CSS 代碼解釋：

1. 在 CSS 中，可以通過使用中括弧 ([]) 語法選擇元素的 data-* 自定義屬性，如：li[data-id=”123″]。
2. 在本例中，自定義屬性是 data-id。

三、HTMLDataset 對錶單的操作

HTMLDataset 對錶單的操作也很方便。例如，在以下 HTML 中設置了自定義屬性，以 ID 為例：

<input type="text" id="myTextInput" data-custom-field="my custom data">

對此我們可以通過以下方式，獲取值：

document.getElementById('myTextInput').dataset.customField；

通過設置「value」屬性也可以將值複製到表單輸入中：

document.getElementById('myTextInput').value = document.getElementById('myTextInput').dataset.customField;

四、HTMLDataset 中的數據類型轉換

自定義屬性一般字元串類型，不同的值類型使用不同的寫法：

1. 字元串：通過設置屬性值來設置。data-name=”John Doe”
2. 整型值： 在值前添加一個 「+」 號來強制將值轉換為數值類型。data-id=”+123″
3. 布爾值： 把值設置為「true」或者「false」. data-visible=”true”
4. 對象：在屬性值中定義 JSON 格式的值。data-employee='{“name”:”John Doe”, “age”:30}’

五、HTMLDataset 對渲染頁面的影響

自定義屬性可以很方便地用於渲染 DOM。在應用程序中使用自定義數據屬性的最大好處是 ：

1. 使用 CSS 系統匹配規則來定義樣式
2. 查找和操作 DOM 樹的時候，持久化應用程序狀態
3. 在 JavaScript 中存儲和控制應用程序的狀態

通過使用 dataset 屬性，可以輕鬆存儲和訪問自定義屬性值，同時規避了自定義屬性對應的Web瀏覽器API建議的命名庫。

六、小結

HTMLDataset 提供了一種可以輕鬆存儲和訪問元素數據屬性的方式。除此之外，它通過使用 CSS 系統匹配規則來定義樣式，從而更好地運行和管理 HTML 代碼。同時，也很好地支持應用程序狀態持久化、查找和操作 DOM 樹等操作。在未來， HTMLDataset 會在發布新版本的HTML5標準 中得到加強和完善。