ID 在整个页面中必须是唯一的吗？
Posted
技术标签:
【中文标题】ID 在整个页面中必须是唯一的吗？【英文标题】：Does ID have to be unique in the whole page? 【发布时间】：2012-03-16 07:31:37 【问题描述】：我正在使用 jQuery，我只是想知道，ID 在整个页面中是否必须始终是唯一的？课程，我知道，可以重复多次，ID呢？
【问题讨论】：
一个id属性一般只使用一次，因为一个ID是唯一的 如果您认为可以，您不能覆盖 ID 的定义。 【参考方案1】：我要补充这个问题，因为我觉得以上任何一个问题都没有得到充分的回答，
作为参考：我已经实现了非唯一 id，并且一切正常（在所有浏览器中）。重要的是，在编码时，我没有遇到任何 css 逻辑错误，这是橡胶在这个问题上遇到的问题（IMO）。在 js 中也没有遇到任何冲突（因为可以在类的上下文中收集 id）
那么，为什么 id 必须是唯一的？明显的答案（如上所述并重申）是'因为'标准'这样说。对我来说缺少的部分是为什么？
即如果（天堂禁止）有人无意中使用了两次相同的 ID，实际上会出现什么问题（或者理论上可能会出现问题）？
【讨论】：
【参考方案2】：ID 在整个页面中是否必须是唯一的？
没有。
因为the html Living Standard2021 年 9 月 7 日 明确指出：
class、id和slot属性可以在所有 HTML 元素上指定。 ……。 在 HTML 元素 上指定时，id属性值必须在元素的 树 中的所有 ID 中唯一> 并且必须至少包含一个字符。该值不得包含任何 ASCII 空格。
并且一个页面可能有多个DOM 树。例如，当您将 (Element.attachShadow()) 一个 shadow DOM tree 附加到一个元素时，它确实如此。
TL;博士
ID 在整个页面中是否必须是唯一的？
没有。
ID 在 DOM 树中是否必须是唯一的？
是的。
【讨论】：
【参考方案3】：是的，它必须是唯一的。
HTML4：
https://www.w3.org/TR/html4/struct/global.html#h-7.5.2
第 7.5.2 节：
id = 名称 [CS] 此属性为元素分配名称。此名称在文档中必须是唯一的。
HTML5：
https://www.w3.org/TR/html5/dom.html#element-attrdef-global-id
id 属性指定其元素的唯一标识符 (ID)。这 value 在元素的主子树中的所有 ID 中必须是唯一的 并且必须至少包含一个字符。该值不得包含 任何空格字符。
【讨论】：
“在元素的 home 子树中的所有 ID 中。”子树。是的，sub-，树。【参考方案4】：从技术上讲，按照 HTML5 标准，页面上的 ID 必须是唯一的 - https://developer.mozilla.org/en/DOM/element.id
但我曾在极度模块化的网站上工作过，在这些网站上完全忽略了这一点，但它确实有效。这是有道理的——最令人惊讶的部分。
我们称之为“组件化”
例如，您的页面上可能有一个组件，它是某种小部件。它的内部有自己独特的 ID，例如“ok-button”
一旦页面上有许多这样的小部件，从技术上讲，您的 HTML 是无效的。但是，componentize 你的小部件是非常有意义的，这样它们每个都在内部引用自己的 ok 按钮，例如，如果使用 jquery 从它自己的根进行搜索，它可能是：$widgetRoot.find("#ok-button")
这对我们有用，但从技术上讲，一旦 ID 不是唯一的，就根本不应该使用它们。
如上所述，即使是 YouTube 也这样做，所以它并没有那么叛逆。
【讨论】：
我强烈反对。这是没有意义的，因为 ID 在页面上是唯一的，这与您的“组件化”想法强烈矛盾。那些重复出现的元素应该是类。您可以根据需要从其特定的独特容器之外定位它们。例如。#ticker-widget .ok-button.【参考方案5】：
2018 年 1 月，这里是 Youtube HTML ，你可以看到 id="button" id="info" 是重复的。
【讨论】：
您几乎不应该将大型动态网站的输出视为“有效代码”的先验示例。 投反对票。仅仅因为 YouTube 跳下桥并不意味着我们应该这样做。【参考方案6】：https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really 对同一问题有很好的答案。
One tidbit not mentioned above 是如果有几个相同的ids 一个相同的页面（发生这种情况，即使它违反了标准）：
如果你必须解决这个问题（很遗憾），你可以使用
$("*#foo")，这将说服 jQuery 使用getElementsByTagName并返回所有匹配元素的列表。
【讨论】：
【参考方案7】：使用 javascript，您只能使用 ID 引用一个元素。 document.getElementById 和 jQuery 的 $ 选择器将只返回匹配的第一个元素。所以在多个元素上使用相同的 ID 是没有意义的。
【讨论】：
【参考方案8】：浏览器曾经对此很宽容（很多年前，当 css 还很年轻时）并允许多次使用 ID。他们变得更加严格。
但是，是的，ID 必须是唯一的并且只能使用一次。
如果您需要多次使用 css 格式，请使用 CLASS。
【讨论】：
【参考方案9】：这基本上就是 ID 的全部意义所在。 :) ID 是特定的，每页只能使用一次。上课可以随意使用。
【讨论】：
【参考方案10】：ID 必须始终是唯一的。
每个人都有一个唯一的识别号码（例如社会安全号码），并且有很多人在一个社会阶层
【讨论】：
【参考方案11】：来自 mdn https://developer.mozilla.org/en/DOM/element.id
所以我想最好是......
【讨论】：
【参考方案12】：是的，ID 是唯一的。类不是。
【讨论】：
以上是关于ID 在整个页面中必须是唯一的吗？的主要内容，如果未能解决你的问题，请参考以下文章