为什么HTML中不允许使用重复的ID

Question

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

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

当然，getElementByID（） - 类似于某些库中的函数可能会返回数组而不是单个元素，这可能会在开发人员没有预料到这种情况时引发问题。但是，据我所知，这些功能将继续如此清晰地运作，它们并不是id重复的突破效果。

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

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

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

Answer 1

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

考虑它的另一种方式：最糟糕的是，你可以使用duzint，这可能是正确的恩格勒斯。你有一个慷慨的编译器/大脑可以理解（例如Google Chrome），但是英语知识有限的人（例如市场浏览器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将返回文档中第一个匹配的元素。但未来情况可能并非总是如此。

Answer 2

  

规格说明UNIQUE

     

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

     

HTML 5 specification说同样的话，但换句话说。它   说ID必须在其主要子树中是唯一的，这基本上是   我们read the definition of it.

的文件      

避免重复

     

但是，因为HTML渲染器在HTML方面非常宽容   渲染它们允许重复的ID。如果有的话应该避免这种情况   以编程方式访问时可能且严格避免   JavaScript中的ID元素。我不确定None mario mario True None 是什么   函数应该在找到几个匹配元素时返回？   它应该：

     

  
• 返回错误？
  
• 返回第一个匹配元素？
  
• 返回最后一个匹配元素？
  
• 返回一组匹配元素？
  
• 什么都没有？
  

     

但即使浏览器现在可靠运行，也没人能保证   这种行为在未来，因为这是违反规范。   这就是为什么我建议你永远不要在同一个内部重复ID   文档。

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

HTML中不允许重复的ID

  

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

〜来自the first element, in tree order.

重复的ID和JavaScript

因此，如果您在HTML中使用重复的ID，则许多库将无法按预期工作。大多数库将获得他们找到的第一个id并返回该元素。当我们查看纯JavaScript时：getElementById应该在具有相同id的多个元素的情况下返回。它说它必须返回{{3}}

Answer 3

  

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

根据specification：

，在任何情况下都是非法的

  

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

  

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

据我所知，CSS selector specification没有定义如何处理非唯一id的文档。因此，在这些情况下，您无法在CSS中安全地使用id选择器。

id属性也用于navigate to fragments（又名＆＃34;主播＆＃34;）。根据{{​​3}}，浏览器应该按树顺序导航到＆＃34;第一个这样的元素＆＃34;。但这可能与哪个元素从上到下首先出现冲突。即您的布局可能与实际的片段链接冲突。

  

当然，jquery等中的getElementByID（）样式函数可能会返回   数组而不是单个元素，这可能会导致问题   开发人员没有预料到这种情况。但是，就我而言   知道，这些功能将继续如此清晰地运作   id重复的破坏效果。

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

  

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

对于specification：

，您的期望也是错误的

  

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

在这种情况下，没有理由违反规范，你不能通过这样做获得任何收益。虽然您的页面不会完全中断，但您可能会遇到CSS，片段链接以及其他可能的问题。此外，您的文档无效，重复的id可能会让其他需要维护您代码的人感到困惑。