如果多个不同的 HTML 元素是不同的元素，它们是否具有相同的 ID？

如果多个 HTML 元素具有不同的元素类型，它们是否具有相同的 ID？这种情况有效吗？例如:

div#foo
span#foo
a#foo
270435 次浏览
小开

没有。具有相同 id 的两个元素无效。ID 是唯一的，如果您希望这样做，可以使用一个类。不要忘记，通过使用空格作为分隔符，元素可以有多个类:

<div class="myclass sexy"></div>
小开
最佳答案

没有。

元素 ID 在整个文档中应该是唯一的。

小开

不，ID 必须是唯一的。您可以为此使用类

<div class="a" /><div class="a b" /><span class="a" />


div.a {font: ...;}
/* or just: */
.a {prop: value;}
小开

有没有可能在一个班级里有一个以上的学生拥有相同的学籍/身份证号码？在 HTMLid属性是这样的。您可以为它们使用相同的类。例如:

<div class="a b c"></div>
<div class="a b c d"></div>

诸如此类。

小开

SLaks 的回答是正确的，但是作为补充说明，x/html 规范指定所有 id 必须是唯一的 在(单个) html 文档中。尽管这并不完全符合操作的要求，但可能存在有效的实例，其中相同的 id 跨多个页面附加到不同的实体。

例如:

(适用于现代浏览器)文章 # main-content { 风格单一}
(服务于遗留) div # main-content { 风格不同}

可能是反模式的，只是作为一个魔鬼的支持者离开这里。

小开

我认为一些东西应该是独一无二的还是必须是独一无二的(例如，由浏览器强制执行)是有区别的。

身份证应该是唯一的吗? 是的。

ID 必须是唯一的吗? 不，至少 IE 和 FireFox 允许多个元素有相同的 ID。

小开

至少在 Chrome 26.0.1410.65，Firefox 19.0.2和 Safari 6.0.3中，如果你有多个元素具有相同的 ID，jquery 选择器(至少)会返回第一个具有相同 ID 的元素。

例如:。

<div id="one">first text for one</div>
<div id="one">second text for one</div>

还有

alert($('#one').size());

有关测试，请参见 http://jsfiddle.net/RuysX/。

小开

即使这些元素是不同类型的，它也会给你带来一些严重的问题..。

假设有3个按钮，它们的 id 相同:

<button id="myid" data-mydata="this is button 1">button 1</button>
<button id="myid" data-mydata="this is button 2">button 2</button>
<button id="myid" data-mydata="this is button 3">button 3</button>

现在，设置一些 jQuery代码，以便在单击 myid按钮时执行某些操作:

$(document).ready(function ()
{
$("#myid").click(function ()
{
var buttonData = $(this).data("mydata");


// Call interesting function...
interestingFunction();


$('form').trigger('submit');
});
});

你以为呢？单击的每个按钮都将使用 jQuery 执行 click 事件处理程序设置。不幸的是，这不会发生。只有 第一军团按钮调用单击处理程序。另外两个什么也不做。就好像它们根本不是纽扣一样！

因此，总是给 HTML元素分配不同的 IDs。这会让你避免奇怪的事情。 :)

<button id="button1" class="mybtn" data-mydata="this is button 1">button 1</button>
<button id="button2" class="mybtn" data-mydata="this is button 2">button 2</button>
<button id="button3" class="mybtn" data-mydata="this is button 3">button 3</button>

现在，如果你想让 click 事件处理程序在任何一个按钮被点击的时候运行，如果你改变 jQuery 代码中的选择器，使用应用到它们的 CSS类，它会完美地工作:

$(document).ready(function ()
{
$(".mybtn").click(function ()
{
var buttonData = $(this).data("mydata");


// Call interesting function...
interstingFunction();


$('form').trigger('submit');
});
});
小开

使用特定于 HTML5的 W3.org 上的 HTML 验证器，ID 必须是唯一的

考虑到以下情况。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyTitle</title>
</head>
<body>
<div id="x">Barry</div>
<div id="x">was</div>
<div id="x">here</div>
</body>
</html>

验证器的响应是..。

Line 9, Column 14: Duplicate ID x.      <div id="x">was</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>
Error Line 10, Column 14: Duplicate ID x.       <div id="x">here</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>

... 但是 OP 特别指出-不同的元素类型怎么样。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyTitle</title>
</head>
<body>
<div id="x">barry
<span id="x">was here</span>
</div>
</body>
</html>

验证器的结果是..。

Line 9, Column 16: Duplicate ID x.          <span id="x">was here</span>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">barry

结论:

在这两种情况下(相同的元素类型，或者不同的元素类型) ，如果 id 被多次使用，则认为它不是有效的 HTML5。

小开

HTML 的官方规范规定 id 标签必须是唯一的 还有，官方规范还规定，如果渲染可以完成，它必须完成(也就是说，在 HTML 中没有“错误”，只有“无效”的 HTML)。因此，下面是 id 标记在实践中的实际工作方式.它们都是 无效，但仍然有效:

这个:

<div id="unique">One</div>
<div id="unique">Two</div>

在所有浏览器中呈现良好。然而，getElementById 只返回一个对象，而不是一个数组; 您只能通过 id 标记选择第一个 div。如果您使用 JavaScript 更改第一个 div 的 ID，那么第二个 ID 将可以通过 document.getElementById 访问(在 Chrome、 FireFox 和 IE11上进行了测试)。您仍然可以使用其他选择方法选择 div，并且它的 id 属性将被正确返回。

请注意，上述问题在呈现 SVG 图像的站点中打开了一个潜在的安全漏洞，因为 SVG 允许包含 DOM 元素，并且在这些元素上有 id 标签(允许通过上传的图像重定向脚本 DOM)。只要 SVG 在替换元素之前被放置在 DOM 中，图像就会接收到针对其他元素的所有 JavaScript 事件。

据我所知，目前没有人注意到这个问题，但它是真实存在的。

这个:

<div id="unique" id="unique-also">One</div>

在所有浏览器中也呈现良好。但是，如果您尝试使用 document.getElementById (‘ only-also’) ，则只使用这种方式定义的 第一 id; 在上面的示例中，将返回 无效(在 Chrome、 FireFox 和 IE11上进行测试)。

这个:

<div id="unique unique-two">Two</div>

然而，在所有浏览器中也能很好地呈现，不像类标签那样可以用空格分隔，id 标签允许空格，所以上面元素的 id 实际上是“惟一的惟一 -2”，要求单独的“惟一”或“唯一 -2”返回 无效，除非在 DOM 的其他地方另有定义(在 Chrome，FireFox 和 IE11上测试)。

小开

多个元素可以有相同的 ID 吗？

是的-无论它们是否是相同的标记，浏览器将呈现页面，即使多个元素具有相同的 ID。

它是有效的 HTML 吗？

没有。对于 HTML 5.1规范来说，这仍然是正确的。但是，规范也说 getElementById 必须返回具有给定 ID 的 < em > first 元素，这使得在无效文档的情况下行为不是未定义的。

这种无效 HTML 的后果是什么？

大多数(如果不是全部)浏览器在调用 getElementById时选择具有给定 ID 的第一个元素。一些通过 ID 查找元素的库继承了这种行为，而较新的库(正如 gman 在回答中指出的那样)将使用更明确的 querySelector和 querySelectorAll方法，这两种方法分别毫不含糊地选择 第一或 所有匹配元素。大多数(如果不是全部)浏览器也将 ID 选择器(例如 #myid)分配的样式应用于所有具有指定 ID 的元素。如果这就是你所期望和打算的，那么就没有意外后果了。如果你期望/打算做其他事情(例如，所有带 ID 的元素都由 getElementById返回，或者样式只应用于一个元素) ，那么你的期望将不会实现，任何依赖于这些期望的特性都将失败。

当多个元素具有相同的 ID 时，一些 javascript 库 做的期望值是不能满足的(参见 Wootscootinboogie 的评论关于 d3.js)

结论

最好是坚持标准，但是如果您知道您的代码在当前环境中可以按预期的方式工作，并且这些 ID 是以可预测/可维护的方式使用的，那么只有两个实际的理由不这样做:

  1. 为了避免出错的可能性，当多个元素具有相同的 ID 时，其中一个库实际上出现了 是的故障。
  2. 保持您的网站/应用程序与库或服务(或开发人员!)的向前兼容性当多个元素具有相同的 ID 时，您可能会遇到故障-这是一种合理的可能性，因为从技术上讲，这不是有效的 HTML。

权力属于你！

小开

我认为你不能这样做，因为 Id 是唯一的，你必须用它作为一个元素。您可以为此目的使用 class

小开 

<div id="one">first text for one</div>
<div id="one">second text for one</div>


var ids = document.getElementById('one');

Id 只包含第一个 div 元素。因此，即使有多个元素具有相同的 id，文档对象也只会返回第一个匹配项。

小开

我们可以使用类名而不是 id。Html id 应该是唯一的，但类不是。当使用类名检索数据时，可以减少 js 文件中的代码行数。

$(document).ready(function ()
{
$(".class_name").click(function ()
{
//code
});
});

小开

是的，他们可以。

我不知道这些答案是不是都过时了，只要打开 youtube 查看 html 就行了。试着查看推荐的视频，你会发现它们都有相同的 ID 和重复结构，如下所示:

<span id="video-title" class="style-scope ytd-compact-radio-renderer" title="Mix - LARA TACTICAL">
小开

给你一个实际的答案。

我们去 Youtube 上运行这段代码

Object.fromEntries(Object.entries([...document.querySelectorAll('[id]')].reduce((s, e) => { s[e.id] = (s[e.id] || 0) + 1; return s; }, {})).filter(([k,v]) => v > 1))

看到所有重复的身份信息。

enter image description here

更改上面的代码以显示重复10次以上的 id，下面是它生成的列表

additional-metadata-line: 43
avatar: 46
avatar-link: 43
button: 120
buttons: 45
byline-container: 45
channel-name: 44
container: 51
content: 49
details: 43
dismissable: 46
dismissed: 46
dismissed-content: 43
hover-overlays: 45
img: 90
menu: 50
meta: 44
metadata: 44
metadata-line: 43
mouseover-overlay: 45
overlays: 45
repeat: 36
separator: 43
text: 49
text-container: 44
thumbnail: 46
tooltip: 80
top-level-buttons: 45
video-title: 43
video-title-link: 43

其他不止一次使用同一个 ID 的网站包括 Amazon.com、 ebay.com、远征军网站和 cnn.com

显然 id 只是元素上的另一块元数据。

getElementById已经过时了。您可以对所有元素使用 querySelectorAll，或者对第一个元素使用 querySelector，不管选择器是什么，所以如果您希望所有元素的 id 都是 foo，那么

document.querySelectorAll('#foo')  // returns all elements with id="foo"

在哪里，如果你想只使用第一个元素使用 querySelector

document.querySelector('#foo')  // returns the first element with id="foo"
document.querySelector('.foo')  // returns the first element with class "foo"
document.querySelector('foo')   // returns the first <foo> element
document.querySelector('foo .foo #foo') // returns the first element with
// id="foo" that has an ancestor
// with class "foo" who has an
// ancestor <foo> element.

我们可以看到使用选择器我们可以找到具有相同 id 的不同元素。

function addClick(selector, add) {
document.querySelector(selector).addEventListener('click', function() {
const e = this.parentElement.querySelector('#value');
e.textContent = parseInt(e.textContent) + add;
});
}
addClick('.e #foo', 1);
addClick('.f #foo', 10);
body { font-size: x-large; font-weight: bold; }
.a #foo { color: red; }
.b #foo { color: green; }
div:nth-child(3) #foo { color: blue; }
#foo { color: purple }
<div class="a"><span id="foo">a</span></div>
<div class="b"><span id="foo">b</span></div>
<div><span id="foo">c</span></div>
<span id="foo">d</span>
<div class="e"><button type="button" id="foo">+1</button>: <span id="value">0</span></div>
<div class="f"><button type="button" id="foo">+10</button>: <span id="value">0</span></div>

ID 是唯一的这一点很重要吗

  • <a>标签可以像 <a href="#foo">一样引用 id。单击它将使用 id="foo"将文档跳转到第一个元素。类似地，URL 中的哈希标记实际上是相同的特性。

  • <label>标记有一个 for属性，用于指定它们用 id 标记的元素。单击标签单击/activates/give-the-focus-to 相应的元素。标签只会影响具有匹配 id 的第一个元素

label { user-select: none; }
<p>nested for checking</p>
<form>
<div><input type="checkbox" id="foo"><label for="foo">foo</label></div>
</form>
<form>
<div><input type="checkbox" id="foo"><label for="foo">foo (clicking here will check first checkbox)</label></div>
</form>

否则，id只是您工具箱中的另一个工具。

小开

可能会有重复的身份。我已经尝试从 javascript 中添加 todoitem，并且它成功地添加到 dom 中。这是 html 代码和 javscript 代码。 I have tried adding the todoitem from javascript and it added to the dom successfully. This is the html code.

This is the javascript code.


提交答案