Question

如果我在网页中包含多个具有相同ID的元素，我很想知道自己会出现什么问题？

例如：

<div id='someID'>Some Content</div>
<div id='someID'>Some Other Content</div>

Answer 1

当您尝试从JavaScript引用这些元素时，它将无法解析您所引用的元素。根据您运行的特定JavaScript解释器，您可能会遇到错误或未定义的行为 - 这两种情况都是不受欢迎的。

HTML规范指出Id应该是唯一的，因此您的HTML将被视为无效，并且可能导致浏览器退回到怪异模式渲染，甚至完全拒绝呈现您的页面（尽管这不太可能，并且所有当前浏览器将呈现某些内容 - 从技术上讲，如果您不遵循规范，浏览器没有义务做任何事情但拒绝您的页面。

如果您希望通过以下方式识别多个元素，则应考虑使用类名：

<div class="someClass">Some Content</div>
<div class="someClass">Some Other Content</div>

Blair在下面的评论中指出，如果你需要从JavaScript中按类搜索元素，你可以通过从带有ID的最近元素开始加速搜索，并告诉它什么节点类型寻找。这可以在很多情况下保持快速访问速度，但不会破坏重复ID的任何规则：

HTML:
<div id="myNearestID">
    <div class="someClass">Some Content</div>
    <div class="someClass">Some Other Content</div>
</div>

JavaScript+JQuery:
$('#myNearestID div.someClass')

Answer 2

IE将使用ID的任何javascript存在重大问题，这是主要的副作用。

总的来说，ID是唯一的，根据规范...浏览器制造商可以在他们的代码中自由地做出这个假设，以及由无效HTML导致的任何错误（Javascript，CSS等）涉及他们......好吧，这是你的问题：）

浏览器没有义务真正修复它，我认为它们也不应该。

Answer 3

我不确定浏览器在这种情况下如何呈现类型#someID的CSS规则（它们可能会将规则应用于所有这些元素），但是你肯定会遇到麻烦和{{{ 1}}。

Answer 4

我在别处读到IE为每个带ID的元素创建一个全局变量。

我说这也是一个问题我错了吗？

Answer 5

还有几点尚未提及。

片段标识符：浏览器如何处理指向http://www.example.com#someID的链接？

内部引用：如果someID在两个输入元素上，并且你有＆lt; label for =“someID”＆gt; ...如果用户点击了标签，则浏览器必须决定哪个输入应该获得焦点。（在HTML5中，这被定义为第一个输入，不一定是你想要的）。同样，对于ARIA的支持，aria-labelledby和aria-described等一些属性依赖于指向一个地方。

Answer 6

当您在Javascript中执行此类操作时，您要引用哪个控件： -

document.getElementById("someID")

Answer 7

我不认为浏览器会抱怨，但您会观察到的其他问题是：

由于dulicate ID声明，该页面可能无法验证
如果他们按ID查找元素，那么页面上可能正在运行的javascript可能会停止正常工作，因为此时它会得到错误的元素
在#ID处应用的CSS规则将重复到具有相同ID

我认为这些问题足以保证不在所有元素中使用相同的ID。

HTH。

Answer 8

当我们通过JavaScript或代码隐藏文件中的其他位置引用它时，浏览器会发疯。

在HTML中使用单个id名称的多个实例有什么副作用？

8 个答案: