如果几个html标签的一组id属性值，相同的字符串会发生什么？答案

【问题标题】：what happens if one set id attribute values of several html tags, the same string?如果几个html标签的一组id属性值，相同的字符串会发生什么？
【发布时间】：2015-08-14 02:52:29
【问题描述】：

我最近看到一个 html 页面，我认为几个 html 标签的 id 是相同的，然后我意识到 id 是唯一的，但它提出了一个问题，如果页面实际上使用了多个标签会发生什么

我听说每个 html 标签的 id 属性（如果有的话）必须是唯一的，

现在我想知道如果不是这种情况会发生什么？

它会导致哪些可能的错误？

不同的浏览器对这个问题有不同的反应吗？

使用重复 id 的 javascript 和 jquery 代码会在两个标签上运行吗？

【问题讨论】：

我很困惑。您链接的页面上有 10 个具有 id 属性的元素，它们都不同：TipLayer、container、header、dibscontent、belief、inaccurate、truth 、worst、good 和 footer。
元素 id 在页面上必须是唯一的，但这会导致网页中断，因此浏览器在呈现页面时会忽略此规则。如果多个元素具有相同的 id，则 JavaScript 和 JS 库的行为会有所不同。有些只返回第一个实例，有些只返回最后一个实例。
@JamesDonnelly 我已经提到“好吧，事实并非如此”抱歉我的解释含糊不清，我编辑了它

标签： javascript jquery html cross-browser

【解决方案1】：

重复的 id 可以产生各种不同的效果。您所经历的将取决于您尝试访问它们的方法（也可能从浏览器到浏览器）。

你会影响他们所有人
你会影响第一个
你会影响最后一个
您将获得一个集合而不是一个元素，尝试将其视为一个元素并得到一个错误

HTML 中不允许有重复的 ID。不要给自己找麻烦。对组使用类，对唯一标识符使用 id。

【讨论】：

【解决方案2】：

尽快换掉，免得日后头疼。对于具有相同属性的元素，请使用 classes

关于您的查询，

现在我想知道如果不是这种情况会发生什么？
那么，HTML 不再是有效的了。现在一天它并没有太大的伤害，但仍然不是首选。

可能会导致哪些错误？
错误有点难以预测。但是使用 jQuery 你会得到很多。

不同的浏览器对这个问题有不同的反应吗？
不确定。

使用重复 id 的 javascript 和 jquery 代码是否在两个标签上运行？
jQuery会给你带来麻烦。考虑这样一种情况，您有两个具有相同 ID 的输入字段。并且您尝试在不注意的情况下选择第二个。 jQuery('yourID').val() 而您将选择第一个值。像这样有很多可能性。

【讨论】：

“现在它并没有受到太大的伤害，但仍然不是首选。”，不，它是无效的，并且被 HTML5 规范禁止。 JavaScript 的 getElementById 方法只返回第一个 ID，因为它们应该是唯一的 - 一旦找到第一个 ID，就没有必要再寻找更多了。
@JamesDonnelly 感谢您提供的信息。 :) 你是对的。

【解决方案3】：

正如您所说，HTML id 必须是唯一的。如果在哪里放置重复的 id，则相对于这些 id 的 js 行为将是不可预测的，甚至可能在 2 次调用之间发生变化。

对一个 id 的任何 js 调用（无论是否为 jquery）都将指向其中一个 id 但不保证：

每次调用都一样
两次页面刷新之间的顺序相同
在 2 个不同的浏览器之间会有相同的行为
同一浏览器两次之间的行为相同

可能出现的问题取决于 js 代码与底层元素 DOM 结构的耦合程度，并且大多数情况下都可能指向未定义的异常并停止 js 执行。

【讨论】：