使用jQuery data（）vs native javascript getAttribute vs input hidden

Question

我需要使用javascript從我的網站訪問一般信息。 到目前為止，我有以下選擇：

• 使用html元素： <input type="hidden" value="MyValue"/>

• 在現有的html元素中使用自定義屬性： <div id="HtmlElement" myattr="MyValue"></div>然后使用document.getElementById("HtmlElement").getAttribute("myattr")訪問它document.getElementById("HtmlElement").getAttribute("myattr")

• 在現有的html元素中使用data屬性： <div id="HtmlElement" data-myattr="MyValue"></div>然后使用jQuery("#HtmlElement").data("myattr")訪問它jQuery("#HtmlElement").data("myattr")

我想知道使用任一選項有什么好處。

我不喜歡使用隱藏的輸入，因為我不喜歡使用包含信息的松散html元素。 但是因為我需要它來顯示一般信息，而不是與頁面中現有html元素相關的信息，所以它看起來並不那么糟糕。

另一方面，我不是濫用外部庫的粉絲，但在我的情況下，我已經在我的網站上加載了jQuery，所以這並不像我為此加載整個庫。

最后，即使是面團性能也是一個問題，在我的情況下，如果這是最快的解決方案，它將不會產生太大的影響。

Answer 1

我會使用數據屬性，因為它是它們的用途，現代瀏覽器有一個本機API用於訪問它們，同時仍然允許非現代瀏覽器作為自定義屬性訪問它們。

給出這個HTML：

<div data-foo="bar"></div>

---

// modern browser:
foo = document.getElementByID("myelementid").dataset.foo;

// older browser:
foo = document.getElementByID("myelementid").getAttribute("data-foo");

// jQuery (all browsers)
foo = $("#myelementid").data("foo");

請注意，如果您的數據屬性是data-foo-bar ，則dataset和.data的鍵將為fooBar

正如sdespont所提到的，數據應該與您存儲它的元素相關。

更新：
同樣重要的是要注意，您也可以使用.attr方法獲取數據屬性的值，但兩者之間存在非常重要的差異。 使用.data獲取數據屬性的值將嘗試將屬性的值解析為正確的javascript 類型 ，例如，如果它可以轉換為int，則它將轉換為int。 如果它可以轉換為對象或數組，它將被轉換為對象或數組。 如果你改為使用.attr() ，你可以確定你總是有一個字符串。

---

也許還值得一提的是，使用.attr()應在者優先.data()除非特別需要通過給出的特征.data()通過使用由於.data()數據高速緩存將針對創建元素及其數據，除非您實際打算多次使用.data()或需要.data()提供的額外功能，否則不需要