JavaScript：利用 HTML5 資料屬性實現最大效率

在本文中，我們將討論如何使用 JavaScript 取得 HTML5 資料屬性。我們將透過幾個實際範例來示範如何透過普通 JavaScript 和 jQuery 使用這些資料屬性。

JavaScript 是網路的核心技術之一。大多數網站都使用它，並且所有現代網頁瀏覽器都支援它，而不需要插件。在本系列中，我們將討論有助於您進行日常 JavaScript 開發的提示和技巧。

通常，您需要在 Web 應用程式或網站上儲存一些額外資訊以及不同的 HTML 元素。它可能對用戶沒有任何意義，但如果您希望根據該資訊執行操作，它可能會對您有所幫助。

例如，如果您有一個 HTML 表，其中包含資料庫中的行，那麼您可能想要為每一行儲存相應的資料庫 ID。這將使編輯和其他事務變得更加容易。這是自訂資料屬性的一個很好的用途。

在引入這些自訂資料屬性之前，開發人員通常會使用類別屬性來儲存此類訊息，但類別屬性實際上並不是用於此目的，這種做法可能會使理解程式碼和網站標記。

隨著 HTML5 自訂資料屬性的引入，在 HTML 中儲存和檢索自訂資料變得非常容易。

使用 Vanilla JavaScript 存取資料屬性

在本節中，我們將討論使用普通 JavaScript 來取得 HTML5 資料屬性的不同方法。

HTMLElement.dataset 屬性

dataset 屬性可讓您輕鬆存取元素的資料屬性。

讓我們考慮以下範例。

首先，我們在每個 <li> 元素上定義了 data-employee-id 自訂資料屬性，用於儲存員工 ID。如果需要的話，稍後可以使用它來獲取員工的更多詳細資訊。接下來，我們在每個<li> 元素上定義了onclick 事件處理程序，因此當您按一下任何行時，它將呼叫getEmpId函數，該函數最終會取得employee 的值- id 與對應<li> 元素關聯的資料屬性。

在 getEmpId 函數中，我們使用了 <li> 元素的 dataset 屬性，該屬性作為第一個參數傳遞。 dataset 屬性傳回 DOMStringMap 對象，您可以使用該物件來取得各個屬性。

當您使用 dataset 屬性來取得各個屬性時，有一些重要的事情。 data- 前綴已從屬性名稱中刪除。任何後面跟著連字符的小寫字符都會轉換為大寫字符，並刪除連字符。換句話說， dash-style 屬性名稱將轉換為 camelCase 物件鍵。其他角色保持不變。

在我們的範例中，使用這些規則，data-employee-id 屬性將轉換為 employeeId。因此，您可以使用 element.dataset.employeeId 來取得 data-employee-id 屬性的值。

這就是 dataset 在 vanilla JavaScript 中正確運作的方式。

getAttribute() 方法

在本節中，我們將討論如何使用 getAttribute 方法來取得資料屬性的值。

我們將修改上一節討論的範例。

如您所見，使用 HTML 元素的 getAttribute 方法取得自訂資料屬性非常簡單。您只需傳遞整個屬性名稱以及 data- 前綴即可取得屬性的值。

使用 jQuery 函式庫存取資料屬性

在本節中，我們將討論如何使用 jQuery 函式庫取得 HTML5 資料屬性。

data() 方法

jQuery data 方法可讓您輕鬆取得元素的資料屬性。

讓我們透過以下範例來了解 jQuery 資料方法的工作原理。

如您所見，我們只需要傳遞資料屬性名稱的駝峰式版本即可取得其值。

attr() 方法

在 jQuery 中，也可以使用 attr 方法來取得元素的特定屬性的值。

讓我們快速了解如何在 jQuery 中使用 attr 方法。

…
…
var empId = $(element).attr('data-employee-id');
…
…

如您所見，attr 方法的工作方式與普通 JavaScript 中的 getAttribute 方法相同。

在jQuery 中，data 和attr 方法的差異在於data 方法內部將從data 屬性取得的字串轉換為對應的類型，如數字、布林值等。

這就是如何使用 jQuery 輕鬆取得資料屬性。

結論

今天，我們討論如何使用 JavaScript 來取得 HTML5 資料屬性。在幾個實際範例的幫助下，您了解了 HTML5 資料屬性如何與普通 JavaScript 和 jQuery 函式庫配合使用。

以上是JavaScript：利用 HTML5 資料屬性實現最大效率的詳細內容。更多資訊請關注PHP中文網其他相關文章！