在 HTML 中使用重複的 ID 時會發生什麼？

具有相同ID 的多個元素：無效之旅

儘管W3C 明確規定頁面中的兩個元素不應共享相同的ID，但這是一個令人費解的現象當多個元素擁有相同的ID 時就會出現這種情況。讓我們研究一下這種異常的影響。

瀏覽器行為

瀏覽器通常採用「靜默失敗」的方法，解釋無效的 HTML 以符合他們的期望。因此，雖然它是無效的，但具有相同 ID 的兩個元素的 HTML 範例可以在所有瀏覽器中運作。

潛在的副作用

但是，如果偏離規範，您就打開了大門不可預見的後果。例如，使用 getElementById() 方法只會擷取具有指定 ID 的第一個元素。

更安全的替代方案

不要使用具有相同 ID 的多個元素，而是使用類別名稱進行樣式設定元素群組。這種做法符合CSS選擇器的預期設計。

查詢具有相同ID的元素

如果你絕對必須選擇具有相同ID的多個元素，你可以求助於屬性選擇器：

document.querySelectorAll('p[id="red"]');

請注意，此方法可能不適用於較舊的瀏覽器版本，例如IE7和

結論

雖然瀏覽器可能會容納無效的 HTML，但強烈建議不要依賴這種行為。為了一致性、可維護性並避免潛在問題，請使用類別名稱來設計相似元素的樣式。

以上是在 HTML 中使用重複的 ID 時會發生什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！