我可以毫無問題地將 UUID 用於 HTML 標簽 ID 嗎？

Question

我有可通過側窗格上的索引訪問的動態內容，當用戶選擇側窗格元素時，我使用 id 作為一種機制來確定他們所指的數據，因此我可以動態生成適當的數據對於主窗格。

我只是使用一個預先格式化的 id 附加一個數字，其中數字是數組中的索引，從而為 html 標簽制作唯一的 id。 但是在某些情況下我會與數字發生沖突，所以我一直認為使用 UUID 是解決我問題的一種方法。

但是我不知道將 UUID 用於 html 標簽 ID 是否有任何問題。

根據我對有效字符和長度限制的了解，我相信直接而快速的答案是它應該有效。 版本 4 使用字符0-9、az 和 -其中 afaict 是 HTML 標簽 ID 的有效字符。 長度似乎也不是問題。

我主要擔心的是是否存在限制 ID 有效大小的瀏覽器問題？ 運行測試並創建值為2d1b8447-e37a-43d8-9f7c-075eac7d9bcc的單個 id，甚至創建具有多個的測試都很好。 但我無法測試所有將使用該應用程序的瀏覽器，而且隨着時間的推移很難測試性能。 我的內容非常動態，可以隨着時間的推移刪除和添加具有這些 ID 的標簽

我嘗試搜索報告的帶有大標簽 ID 的問題，但一無所獲，但通過 Google 沒有發現問題並不能證明沒有任何問題。

那么...有沒有人在 html 標簽上使用 UIID 作為 id，如果是這樣，我需要避免您遇到的任何問題嗎？

我應該注意，有證據表明 UUID 在索引 (InnoDB)方面存在性能問題，我擔心的是 DOM 操作和使用 jQuery 以及 UUID 的 id 可能會遇到類似的問題。

干杯。

Answer 1

可以使用data-屬性完成同樣的事情。

例子：

<a href="#" data-UUID="2d1b8447-e37a-43d8-9f7c-075eac7d9bcc" class="product_link">Some product</a>

使用 jQuery 讀取data-屬性：

$('.product_link').click(function(){
     var UUID=$(this).data('UUID');
    /* do something with UUID*/
})

Answer 2

我使用 UUID 作為元素 ID，CSS 選擇器對我來說失敗了，因為 ID 似乎必須以字母而不是數字開頭，以便能夠對它們執行基於有效 CSS id 選擇器的查詢。

document.querySelectorAll('#fd759ae2-c0ed-4de5-80fd-932c814a53c7 > div') # works
document.querySelectorAll('#81ea82f5-9a6f-4ae3-93e3-a5ef3579c554 > div') # fails

Answer 3

您可以將它用於默認情況，例如 - 在您忘記傳遞 ID 的組件中，您需要將 ID 提供給 html 元素以實現可訪問性目的。 如果您嘗試將它用於其他情況，請記住 uuid 在每次運行中都可能不同，因此您不能將此 ID 值用作 css 或測試用例中的固定值。