为什么 HTML 中不允许重复的 id

IT技术 javascript jquery html dom
2021-01-22 11:36:36

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

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

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

那么为什么说重复的 id 是不允许的呢?

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

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

3个回答

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

考虑它的另一种方式: 只是因为你读了 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 将返回文档中第一个匹配的元素。但未来可能并非总是如此。

@VanquishedWombat 我认为这对任何刚接触编程的人来说都是一个非常有value的类比。就像日本酒一样,我觉得这很有趣。拒绝投票,所以不允许喜剧!
2021-03-13 11:36:36
“...或精神上无行为能力的人(例如 Internet Explorer)”啊哈哈哈哈。不错的对比。:)
2021-03-22 11:36:36
我认为你贬低了你对英语的反应。@rensvwalstijn 的回答更符合事实。
2021-03-28 11:36:36

规范说 UNIQUE

HTML 4.01 规范规定ID 必须在文档范围内唯一。

HTML 5 规范说了同样的事情,但换言之。它说 ID 在其主子树中必须是唯一的,如果我们阅读它的定义,它基本上就是文档

避免重复

但是由于 HTML 渲染器在 HTML 渲染方面非常宽容,因此它们允许重复的 ID。如果可能的话应该避免这种情况,并且在通过 JavaScript 中的 ID 以编程方式访问元素时应严格避免这种情况。getElementById 当找到多个匹配元素时,我不确定应该返回什么函数?应该是:

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

但是,即使浏览器现在可以可靠地工作,也没有人能保证将来会出现这种行为,因为这违反了规范。这就是为什么我建议您不要在同一文档中重复 ID。

这是一个答案由罗伯特Koritnik软件工程要求由danludwig
问题:用相同id属性的两个HTML元素:如何不好是不是真的?

HTML 中不允许出现重复的 ID

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

~来自丹雷

重复的 ID 和 JavaScript

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

@Alohci 在答案中添加了它
2021-03-15 11:36:36
FWIW,DOM 规范说明在具有相同 id 的多个元素的情况下 getElementById() 应该返回什么。它说它必须按树顺序返回第一个元素
2021-03-19 11:36:36
谢谢。请参阅我对模板库问题的编辑。
2021-03-29 11:36:36

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

根据规范,在任何情况下都是非法的

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


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

CSS选择器规范没有定义如何处理与非唯一文件idS,据我可以告诉。因此,在这些情况下,您不能安全地在 CSS 中使用 id 选择器。

id属性还用于导航到片段(又名“锚点”)。根据规范,浏览器应该导航到“树序中的第一个这样的元素”。但这可能与哪个元素实际上从上到下首先出现冲突。即您的布局可能与实际片段链接冲突。


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

这显然是错误的,getElementByID() 永远不会返回数组。根据规格

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

jQuery的情况下,您的期望也是错误的

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


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