最佳實踐：類或數據屬性作爲標識符

最近我一直在想知道最好的方法是在多個元素上執行JavaScript操作。最佳實踐：類或數據屬性作爲標識符

我看到它的方式有以下兩種方式：

無論是我一個CSS類添加到我的元素，這並不一定對應於任何現有的CSS規則：<div class="validation-required"></div>
或者我用數據屬性，像這樣：<div data-validation-required></div>

在我的IDE（的Visual Studio 2012，使用R＃），如果我用第一種方法，我得到一個警告，說我不應該使用未定義的CSS類。這讓我相信這可能不是最好的主意。但是，這是我經常使用的方法，儘管這可能只是我們可以使用數據屬性之前幾天的遺留物。

所以我的問題很簡單，我該怎麼去簡單地「標記」一個元素進行進一步處理？

感謝您的任何答案

PS：我知道這個問題可能容易受到主觀意見，但我希望有在現代瀏覽器如何使用concensus。

PPS：我已經完成了對這個問題的搜索，但大多數問題都是關於性能的，這並不是我一次性關注的主要問題。

來源

2013-06-19 Kippie

+1數據屬性:) – karaxuna

@karaxuna你爲什麼喜歡這個任何具體的原因是什麼？還是僅僅是個人品味？ – Kippie

我無法說出任何具體的參數。但我認爲，CSS類是分配樣式和數據屬性正是爲數據分配元素。對我來說更自然的方式是 – karaxuna

根據W3C

data- *

自定義數據屬性是爲了存儲專用的網頁或應用程序的定製數據，其中有沒有更適當的屬性或元素。這些屬性不適用於獨立於使用屬性的站點的軟件。

class

類屬性在HTML幾種作用：作爲樣式表選擇器（當作者希望的樣式信息分配給一組的元素）。用於用戶代理的通用處理。

如果使用class屬性，你可以受益於本地~~getElementsByClassName搜索和~~classList對象切換，添加和刪除類。 ~~沒有什麼像getElementsByAttributeValue，你需要迭代。~~_{見奧利弗·莫蘭的評論}

在另一方面，如果你需要存儲多種數據，你可以使用dataset attribute。

所以，如果你想搜索或數據是否影響到元素的外觀，我會使用class。如果您需要存儲多個數據，則data會更合適。

來源

2013-06-19 07:26:57

你可以在jQuery中使用'data- *'選擇器來獲取所有使用* that * data-attribute的元素的列表 –

@badZoke這個問題不是關於jQuery的，所以你的註釋是OT。我的觀點是關於本地支持。框架應該用於特定的體系結構。如果任何JS框架想要添加一些通用的僞裝特性（如data- *選擇器），這隻意味着創建者不理解背後的一些原則。 –

最後，我根據指定的W3C標準選擇了此答案。它沒有提到一個*要求*類爲解決成一個特定的風格。特別是「用於用戶代理的通用處理」。讓我覺得我可以使用這個，而不是一個空的數據屬性。 – Kippie

如果您只是想給DOM元素計算的目的，然後data-attribute是因爲要走的路「值」相關聯，

什麼是「數據 - 」將作爲私有存儲區域進行處理數據（私人在這個意義上，最終用戶無法看到它 - 它不影響佈局或演示）

此外，jQuery提供了.data()，使生活更輕鬆，所以你不必使用的麻煩選擇器。

如果你要提供一個類名，那麼考慮語義，它應該有一些與它相關的樣式。

約翰Resig的已經撰寫了有關data-attributes

來源

2013-06-19 07:14:54

我理解你的觀點，但在我的情況下，我沒有存儲任何數據。我使用一個空的數據屬性作爲標記我的元素以供我的腳本使用的方法。如果我爲此使用它，您的答案仍然計數嗎？ – Kippie

是的，因爲你仍然在使用它作爲你的腳本的訪問點，沒有別的（不是樣式和/或演示文稿）。此外，您還*存儲數據*（數據告訴腳本撿起它）。 –

對於這個問題的未來圍觀：

規格使用的自定義數據元素 - 例如與使用 - 在這裏給出：測試這些東西是

W3 spec on embedding custom non visible data with the data attribute

來源

2015-01-29 23:16:52

並提供鏈接是不夠的。引用回答OP問題的相關信息。 –

最好的方法搜索測試套件上jsperf.com

這裏是一個你感興趣的是： http://jsperf.com/id-vs-class-vs-data-attribute

最有效的選擇器是使用類。

這可能是類更多地用於選擇的結果，所以瀏覽器會優化更多？

JsPerf.com results for selection based on ID, Class or attribute

來源

2015-03-26 01:12:34 Berty

在大多數情況下並不重要。我剛剛在最新的Chrome上進行了測試，ID爲1300000 ops/s，數據編號爲90000 ops/s。不過，在90000ops/s下，執行只需要0.01ms。在一個典型的例子中，你想通過數據屬性選擇一個元素，你一次只能做一次。 –

最佳實踐：類或數據屬性作爲標識符

回答

相關問題