我很好奇，如果我在网页中包含多个具有相同id的元素，会导致什么问题？
例如：
<div id='someID'>Some Content</div>
<div id='someID'>Some Other Content</div>
在HTML中，使用多个相同的ID名称有什么副作用？
7
- David Meister
3
1为什么你想要这样做？ - RichardOD
4我不明白，但了解为什么我不明白。 - David Meister
1小注释：在HTML中，使用双引号来分隔属性值是一种被接受的约定。 - BalusC
8个回答
7
当你试图从JavaScript引用这些元素时，它将无法确定你所指的是哪个元素。根据你运行的具体JavaScript解释器，你可能会遇到错误或未定义的行为 - 这两种情况都不理想。
HTML规范规定ID应该是唯一的，因此你的HTML将被视为无效，并可能导致浏览器回退到怪异模式渲染，甚至完全拒绝渲染你的页面（尽管这不太可能，所有现代浏览器都会渲染一些东西 - 技术上讲，如果你不遵循规范，浏览器没有义务做任何事情，只会拒绝你的页面）。
如果想要通过标识多个元素，请考虑使用类名代替ID：
HTML规范规定ID应该是唯一的，因此你的HTML将被视为无效，并可能导致浏览器回退到怪异模式渲染，甚至完全拒绝渲染你的页面（尽管这不太可能，所有现代浏览器都会渲染一些东西 - 技术上讲，如果你不遵循规范，浏览器没有义务做任何事情，只会拒绝你的页面）。
如果想要通过标识多个元素，请考虑使用类名代替ID：
<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')
- Simon P Stevens
5
是的，虽然没有原生JavaScript可以通过类来定位元素。但是jQuery在遍历它们时非常缓慢，所以并不完全相同。 - David Meister
如果您从具有ID的最近元素开始，并告诉它要查找哪种节点类型，速度会快得多。在这种情况下，使用
$('#myNearestID div.someClass')。 - Blair McMillan@user278457：是的，但如果您使用重复的Id，就无法保证它能正常工作。这就像说您想要为两个网站使用相同的URL，因为这样可以避免多次DNS查找。你更想要什么，快还是正确？@Blair。不错的建议。谢谢，我会把它包含在答案中。 - Simon P Stevens
是的，我知道如何搜索最近的带有ID的父级div。不过还是谢谢你提醒我。 - David Meister
1顺便提一下，jQuery接受第二个值来指定上下文，实现相同的功能。
例如：$('#nearestID div.someClass') 或者 $('div.someClass','#nearestID') - David Meister
6
使用ID的javascript会导致IE出现重大问题，这是主要的副作用。
总体而言，根据规范，ID是唯一的......浏览器制造商可以在他们的代码中自由地做出这个假设，并且任何由于涉及无效HTML的错误（Javascript、CSS等）......好吧，那就是你的问题:)
浏览器并没有义务真正修复它，我认为他们也不应该这样做。
- Nick Craver
1
我不确定浏览器在这种情况下如何呈现类型为#someID的CSS规则（它们可能会将规则应用于所有这样的元素），但您肯定会在JavaScript和getElementById中遇到问题。
- zoul
1
我在其他地方读到，IE会为每个带有ID的元素创建一个全局变量。
我说这也是个问题，我错了吗？
- David Meister
1
还有几个点没有提到。
片段标识符：如果浏览器链接到 http://www.example.com#someID ，浏览器会如何处理？
内部引用：如果 someID 在两个输入元素上，并且您有 <label for="someID">... 如果用户单击标签，浏览器必须决定哪个输入应该获得焦点。（在 HTML5 中，这被定义为第一个输入，这不一定是您想要的）。同样适用于 ARIA 支持，某些属性（例如 aria-labelledby 和 aria-describedby）依赖于指向单个位置。
- Alohci
4
我在1994年学习了HTML，那时候www.example.com#someID会跳转到<a name="someID">Section headline</a>。这些年来有所改变吗？我不知道你可以通过在URL中指定其ID来跳转到标签。 - Peter Hahndorf
1是的。HTML4.01规范表示：“在HTML文档中，目标锚点可以通过A元素（使用name属性命名）或任何其他元素（使用id属性命名）来指定。”在HTML5中，“a”元素上的“name”属性已经过时。（http://dev.w3.org/html5/spec/obsolete.html#obsolete） - Alohci
谢谢！我之前不知道HTML5中有这个变化。 - stefanglase
+1 我也不知道，这些年来一直在添加不必要的锚点标签！ - Martin Smith
0
当你在JavaScript中执行以下操作时，你想要引用哪个控件：
document.getElementById("someID")
- Ashish Gupta
0
我认为浏览器不会抱怨，但你可能会遇到其他问题：
- 由于重复ID声明，页面可能无法验证
- 如果JavaScript通过ID查找元素，则在此时它将获取错误的元素，因此可能无法正常工作
- 应用于#ID的CSS规则将重复应用于所有具有相同ID的元素
我认为这些问题足以证明不应在所有元素中使用相同的ID。
希望对你有所帮助。
- Sunny
0
当我们在JavaScript或代码后台文件中引用浏览器时，它会发疯。
- pointlesspolitics
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接