为啥 HTML 中不允许重复的 ID 值？

Posted 2023-05-08

【中文标题】为啥 HTML 中不允许重复的 ID 值？

【英文标题】：Why are duplicate ID values not allowed in HTML?为什么 HTML 中不允许重复的 ID 值？

【发布时间】：2018-06-22 17:47:12

【问题描述】：

在什么情况下非法 html 页面包含具有重复 ID 属性的元素？

作为一名使用 HTML 多年的开发人员，我知道我的意图是元素 id 应该是唯一的 - 我要问的是重复 id 的实际负面影响。

诚然，某些库中类似于 getElementByID() 的函数可能会返回数组而不是单个元素，当开发人员没有预料到这种情况时，这可能会导致问题。但是，据我所知，这些功能将继续如此清晰地运行，它们不是 id 重复的破坏效应。

那么为什么说重复的 id 不被允许？

编辑：问题的驱动力是我在生成列表/重复项时看到了一些模板库，生成了具有重复 id 的元素，我想知道这在实际中可能会产生什么影响以及如何决定是否采用这些图书馆。

我还想知道模态插件或任何其他可能克隆现有隐藏节点并因此通过代码创建副本的效果，然后浏览器在这种情况下会做什么。

【问题讨论】：

getElementById 只返回一个元素，从不返回数组。与 jQuery ID 选择器相同...不会查找多个，不会返回多个

@Luca 和 OP，如果您正在编写 JS，请考虑使用 data-* 属性而不是类。这允许您完全分离 JS/CSS 关注点。有一些小的性能优势需要担心，但我们的代码可维护性所带来的好处已经超过了假设的毫秒级减速。

一般来说，浏览器无论在做什么，在面对无效标记时都不会崩溃。所以你总是会得到一些行为，并且编写 HTML 规范是为了定义行为，并且在浏览器实现中保持一致。在大多数情况下，除了 CSS 选择器，匹配将在 DOM 中具有给定 ID 的第一个元素上。因此，大多数情况下，失败模式是匹配不会出现在您想要匹配的元素上。

关于您的编辑：我不会考虑使用会创建无效 HTML 的模板库。

ID 必须是唯一的，因为这就是“身份”这个词的含义！使用 ID 的全部原因是为了唯一地标识一个元素。对世界说，“这就是我们正在谈论的那个”。如果你不想这样，那么就不要使用 ID。

【参考方案1】：

它总是“非法的”。违反规范=非法。仅仅因为侥幸或过于慷慨的编译器“似乎工作”并不意味着它是有效的代码。

另一种思考方式：只是因为你 kan reed ths duzint mayke it korrect Englesh。你有一个可以理解的编译器/大脑（例如谷歌浏览器），但是英语知识有限的人（例如市场浏览器 X 的新手）或精神无能的人（例如 Internet Explorer）可能根本不理解它...但是如果每个单词的拼写正确/符合规范，就能够理解它。

https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really

我能找到的几个原因：

根据 DOM 规范，“如果多个元素具有具有该值的 ID 属性，则返回的是未定义的”

还有：

不正确不会出现灰色阴影。此代码违反标准，因此不正确。它会失败验证检查，它应该。也就是说，目前市场上没有浏览器会抱怨它，或者根本没有任何问题。浏览器有权投诉它，但目前没有任何版本的浏览器这样做。这并不意味着未来的版本可能不会糟糕地处理这段代码。

还有：

在 css 或 javascript 中尝试将该 ID 用作选择器的行为是不可猜测的，并且可能因浏览器而异。

还有：

许多 javascript 库无法按预期工作

还有：

经验表明，主流浏览器中的 getElementById 会返回文档中第一个匹配的元素。但未来可能并非总是如此。

【讨论】：

"...或有精神障碍的人（例如 Internet Explorer）"啊哈哈哈哈。不错的对比。 :)

我认为你贬低了你对英语的反应。 @rensvwalstijn 的回答更符合事实。

@VanquiishedWombat 我认为对于任何刚接触一般编程的人来说，这将是一个非常有价值的类比。就像sinisake一样，我认为这很有趣。投反对票，SO 不允许喜剧！

【参考方案2】：

规格说明是唯一的

HTML 4.01 specification 表示 ID 必须在文档范围内唯一。

HTML 5 specification 说了同样的话，但换句话说。它 表示ID在它的home子树中必须是唯一的，基本上就是 文件如果我们read the definition of it.

避免重复

但是由于 HTML 渲染器在处理 HTML 时非常宽容 呈现它们允许重复的 ID。如果有的话，应该避免这种情况 以编程方式访问时可能并严格避免 JavaScript 中的 ID 元素。我不确定getElementById 当找到几个匹配的元素时，函数应该返回吗？ 应该：

返回错误？ 返回第一个匹配元素？ 返回最后一个匹配元素？ 返回一组匹配的元素？ 什么都不返回？

但即使这些天浏览器运行可靠，也没有人能保证 将来会出现这种行为，因为这违反了规范。 这就是为什么我建议你不要在同一个文件中重复 ID 文件。

这是Robert Koritnik 在Software Engineering 由danludwig 提出的答案 提问：Two HTML elements with same id attribute: How bad is it really?

HTML 中不允许重复的 ID

该代码不正确。不正确不会出现灰色阴影。这 代码违反标准，因此不正确。它会失败 验证检查，它应该。也就是说，目前没有浏览器 市场上会抱怨它，或者有任何问题 全部。浏览器会在他们的权利范围内 o 抱怨它，但是 他们中的任何一个的当前版本目前都没有。哪一个 并不意味着未来的版本可能不会糟糕地对待这段代码。

~来自Dan Ray

重复的 ID 和 JavaScript

因此，如果您在 HTML 中使用重复的 ID，许多库将无法按预期工作。大多数库将获得他们找到的第一个 id 并返回该元素。当我们查看纯 JavaScript 时：document.getElementById("idName"); 应该在具有相同 id 的多个元素的情况下返回。它说它必须返回the first element, in tree order.

【讨论】：

FWIW，DOM 规范规定 getElementById() 在多个元素具有相同 id 的情况下应该返回什么。它说它必须返回the first element, in tree order

@Alohci 在答案中添加了它

谢谢。请参阅我对模板库的问题的编辑。

【参考方案3】：

什么情况下HTML页面包含 具有重复 ID 属性的元素？

根据specification：在任何情况下都是非法的：

当在 HTML 元素上指定时，id 属性值必须在元素树的所有 ID 中是唯一的 [...]。

---

作为一名使用 HTML 多年的开发人员，我知道 目的是元素ID应该是唯一的-我是什么 询问的是重复 ID 的实际负面影响。

据我所知，CSS selector specification 没有定义如何处理具有非唯一 ids 的文档。所以在这些情况下，你不能安全地在 CSS 中使用 id 选择器。

id 属性也用于navigate to fragments（又名“锚点”）。根据specification，浏览器应该导航到“树顺序中的第一个这样的元素”。但这可能与哪个元素实际上从上到下首先出现冲突。 IE。您的布局可能与实际的片段链接冲突。

---

当然，jquery 等中的 getElementByID() 样式函数可能会返回 数组而不是单个元素，这可能会导致问题 开发商没有预料到这种情况。然而，据我所知 知道，这样的功能将继续运行，如此清晰地它们不是 id 重复的破坏效果。

这显然是错误的，getElementByID() 从不返回一个数组。根据specification：

getElementById(elementId) 方法在调用时必须返回上下文对象的后代中的第一个元素（按树顺序），其 ID 为 elementId，否则如果没有这样的元素，则返回 null。

在jQuery的情况下你的期望也是错误的：

每个id 值必须在文档中只能使用一次。如果为多个元素分配了相同的 ID，则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。但是，不应依赖此行为；具有多个使用相同 ID 的元素的文档无效。

---

在这种情况下确实没有理由违反规范，这样做不会有任何好处。虽然您的页面不会完全中断，但您可能会遇到 CSS、片段链接和其他可能的问题。此外，您的文档将无效，并且重复的ids 可能会使其他必须维护您的代码的人感到困惑。