使用“data-*”屬性替換 HTML 標簽中的“id”屬性用於 CSS 選擇目的

Question

出於 css 選擇的目的，使用“data-”屬性替換元素（標簽）中的“id”屬性，然后在自動化測試腳本中使用這些“data-*”屬性是個好主意嗎？

Answer 1

不。

id 上的 CSS 選擇和 DOM 樹選擇比選擇任何其他屬性要快得多。 在某些瀏覽器中，數據屬性選擇的效率可能低於其他屬性的選擇。

例外情況可能是如果您濫用 id 屬性：在其中存儲不只是標識符的內容（例如復合數據或不唯一的內容）。 選擇 id 值的部分（如果支持）會產生糟糕的性能。 我建議使用數據屬性而不是濫用 id 屬性。

Answer 2

實際上，您可以使用元素的任何屬性。

所以，是的，如果元素是唯一標識的，您也可以使用data-*屬性而不是id屬性。

---

HTML 數據-* 屬性

• data-*屬性用於存儲頁面或應用程序私有的自定義數據。
• data-*屬性使我們能夠在所有 HTML 元素上嵌入自定義數據屬性。
• 然后可以在頁面的 JavaScript 中使用存儲的（自定義）數據來創建更具吸引力的用戶體驗（無需任何 Ajax 調用或服務器端數據庫查詢）。
• data-*屬性由兩部分組成：
  • 屬性名稱不應包含任何大寫字母，並且必須在前綴data-后至少長一個字符-
  • 屬性值可以是任何字符串
• 注意：以data-為前綴的自定義屬性將被用戶代理完全忽略。