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

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

任何使用ID的javascript都会出现IE问题,这是主要的副作用.

总的来说,ID是唯一的,根据规范......浏览器制造商可以自由地在他们的代码中做出这个假设,以及由无效HTML引起的任何错误(Javascript,CSS等)......好吧,那就是你的问题:)

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