提问人：webmat 提问时间：10/11/2008 最后编辑：Peter Mortensenwebmat 更新时间：5/30/2023 访问量：473853
一个 HTML 元素可以有多个 ID 吗？
Can an HTML element have multiple ids?
问：
我知道 id 在 HTML/XHTML 页面中必须是唯一的。
对于给定的元素，我可以为其分配多个 ID 吗？
<div id="nested_element_123 task_123"></div>
我意识到我有一个简单的解决方案，只需使用一个类。我只是对以这种方式使用 ids 感到好奇。
答：
0赞
Robert K
10/11/2008
#1
这很有趣，但据我所知，答案是否定的。我不明白为什么你需要一个嵌套 ID，因为你通常会将它与另一个具有相同嵌套 ID 的元素交叉。如果你不这样做就没有意义，如果你这样做了，仍然没有什么意义。
评论
4赞
FLY
11/12/2012
我本来也想使用 2 个 id 来实现向后兼容性。例如，在以前的版本中曾经是 Article-8，但现在称为 Node-8，一个元素有 2 个 ID 会阻止编写解决方法以使其向后兼容。虽然两个 ID 都将保持为唯一标识符。
4赞
tpower
10/11/2008
#2
不，单个标签不能有多个 ID，但我见过一个带有属性的标签，并且某些应用程序对属性的处理方式相同。nameid
评论
2赞
scunliffe
10/11/2008
在 IE 中，在 IE8 之前，是的。但是他们现在已经在标准模式下修复了该错误。getElementById（） 用于错误地返回 elems 在 name 和 id 上不区分大小写。
233赞
timmow
10/11/2008
#3
不。来自 XHTML 1.0 规范
在 XML 中，片段标识符为 键入 ID，并且只能有一个 每个类型 ID 的单个属性 元素。因此，在 XHTML 1.0 中， id 属性定义为 同上。为了确保 XHTML 1.0 文档是结构良好的 XML 文档，XHTML 1.0 文档必须 定义时使用 id 属性 元素上的片段标识符 上面列出。查看 HTML 兼容性准则 有关确保此类锚点的信息 上菜时向后兼容 XHTML 文档作为媒体类型 文本/html。
评论
7赞
Richeve Bebedor
4/28/2013
“片段标识符的类型为 ID，每个元素只能有一个 ID 类型的属性。”它在这里说，单个属性和属性与属性的值不同。它没有说明属性值在任何上下文中都不应通过空格分隔或任何字符分隔来假定多值。尽管在规范中，它说为了向后兼容，它不能在属性值中包含空格字符 片段标识符（w3.org/TR/xhtml1/#guidelines） 因此，如果要表达多值 ID，则必须以不同的方式表达它
4赞
Mark Schultheiss
10/24/2017
我想这取决于你引用的规格。“此规范不排除具有多个 ID 的元素......”w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
0赞
Mark Schultheiss
10/24/2017
请看这里这句话被删除的地方 w3.org/TR/html5/dom.html#the-id-attribute
27赞
acrosman
10/11/2008
#4
哈哈虽然 W3C 对 HTML 4 的定义似乎没有明确涵盖您的问题，但 name 和 id 属性的定义表明标识符中没有空格：
ID 和 NAME 标记必须以字母 （[A-Za-z]） 开头，后跟任意数量的字母、数字 （[0-9]）、连字符 （“-”）、下划线 （“_”）、冒号 （“：”） 和句点 （“.”）。
22赞
tvanfosson
10/11/2008
#5
不。每个 DOM 元素，如果它有一个 id，它都有一个唯一的 id。您可以使用以下方法近似它：
<div id='enclosing_id_123'><span id='enclosed_id_123'></span></div>
然后使用导航来获取您真正想要的内容。
如果您只是想应用样式，类名会更好。
评论
0赞
Aupajo
10/11/2008
不过，这会破坏验证。
20赞
tvanfosson
10/13/2008
不是我。:-)我不确定你所说的破坏验证是什么意思？div 和 span 的 id 不同（封闭与封闭），因此重复的 id 没有问题。也许有些人没有仔细阅读。
5赞
TrojanName
5/18/2011
抢劫银行是非法的，软件问题从来都不是违法的。又是旧的虚拟现实与现实问题：-P
0赞
ProblemsOfSumit
1/10/2014
@BrianFenton调试别人的代码让我意识到这应该是非法的。我说 5 年监禁，因为没有充分的理由不遵守规范。
25赞
Ross
10/11/2008
#6
我的理解一直是：
ID 是一次性使用的，仅应用于一个元素...
- 每个元素都作为唯一标识符（仅）归因于一个元素。
类可以多次使用...
- 因此，它们可以应用于多个元素，并且类似但不同的是，每个元素可以有多个类（即多个类）。
评论
26赞
Kevin
4/19/2015
我不认为这有资格成为问题的答案。问题是：“单个元素可以使用多个 ID 吗？
4赞
Mahdi
8/8/2015
@kevin 这个答案假设 OP 面临 XY 问题，并且绝对可以帮助那些试图通过 ID 实现类行为的人——无论出于何种原因。
0赞
Mbotet
12/30/2019
您指的是“一次性使用”，但这可能会引起混淆。你可以而且是一个经常和正确的事情，用一个元素的id多次使用。我认为您正在解决的是另一种解释，即：您为一个元素使用一个（且只有一个）id，并且仅对该元素使用。
3赞
Anjisan
10/11/2008
#7
不，如果你想沿着这条路走下去，你应该使用嵌套的 DIV。此外，即使可以，想象一下运行 document.getElementByID（） 时会引起的混乱。如果有多个 ID，它会抢什么 ID？
在稍微相关的主题上，您可以向 DIV 添加多个类。参见埃里克·迈尔斯（Eric Myers）的讨论，
http://meyerweb.com/eric/articles/webrev/199802a.html
评论
3赞
Rin and Len
11/14/2019
它不会得到你在括号之间指定的id吗？ 没有指定要获取的内容的字符串，则不做任何事情？！将获取以 foo 作为 ID 的元素！多个 ID 在这里无关紧要。它仍然会寻找“foo”。getElementById();getElementById('foo');
21赞
AmbroseChapel
10/11/2008
#8
每个元素只能有一个 ID，但实际上可以有多个类。但不要有多个类属性;将多个类值放入一个属性中。
<div id="foo" class="bar baz bax">
是完全合法的。
评论
0赞
charlie arehart
12/11/2023
这对我有用，用于命名锚点（在一行上替换以前使用的老式名称“元素，如 ）。<a name="x"/><a name="y"/>
1赞
Taylor
4/20/2010
#9
简单的答案是否定的，正如其他人在我之前所说的那样。一个元素不能有多个 ID，并且一个 ID 不能在一个页面中使用多次。尝试一下，你会看到它有多好用。
针对 tvanfosson 关于在两个不同元素中使用相同 ID 的回答。据我所知，一个 ID 只能在一个页面中使用一次，无论它是否附加到不同的标签。
根据定义，需要 ID 的元素应该是唯一的，但如果需要两个 ID，那么它就不是真正唯一的，而是需要一个类。
评论
1赞
Ben
12/7/2010
但是，如果你读了 tvanfosson 的回答，这两个 ID 明显不同 “enclosing_id_123” ！= “enclosed_id_123”
-2赞
Ole Reidar Johansen
9/13/2010
#10
我不认为你可以有两个 ID，但应该是可能的。两次使用相同的 id 是不同的情况......就像两个人使用同一本护照一样。但是，一个人可以拥有多本护照......来找这个，因为我有一个员工可以有多个功能的情况。说“sysadm”和“团队协调员”具有id=“sysadm teamcoordinator”可以让我从其他页面引用它们，以便员工.html#sysadm和员工.html#teamcoordinator将指向同一个地方......有一天，其他人可能会接管团队协调员的职能，而 sysadm 仍然是 sysadm......然后我只需要更改员工.html页面上的id...但就像我说的 - 它不起作用:(
224赞
user123444555621
4/16/2011
#11
与其他人所说的相反，正确答案是肯定的
选择器规范对此非常清楚：
如果元素具有多个 ID 属性，则出于 ID 选择器的目的，必须将所有这些属性视为该元素的 ID。这种情况可以通过混合使用 xml：id、DOM3 Core、XML DTD 和特定于命名空间的知识来实现。
编辑
澄清一下：是的，一个XHTML元素可以有多个id，例如
<p id="foo" xml:id="bar">
但是，使用空格分隔的列表将多个 ID 分配给同一属性是不可能的。id
评论
4赞
tvanfosson
5/19/2011
不幸的是，这里起作用的不是CSS规范。对于 HTML/XHTML，您必须查看该规范，并且那里的规范明确规定每个元素最多可以有一个 id，并且该 id 在页面上必须是唯一的： w3.org/TR/html401/struct/global.html#h-7.5.2（用于 HTML 4）
11赞
user123444555621
5/19/2011
@tvanfosson：令人惊讶的是，HTML4 规范并没有说每个元素最多可以有一个 id。如果你看一下 HTML5 规范，你甚至会发现它（对应于 CSS 规范）This specification doesn't preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element's ID in a way that doesn't conflict with the id attribute.
1赞
tvanfosson
5/19/2011
您只能有一个 id 属性，并且 id 属性内容的格式不允许有任何空格。在问题的上下文中 - 给元素 2 “HTML” id -- 在 HTML 4 或 HTML 5 中都不可能做到这一点。你假设给它一个与 CSS 一起工作的 id 足以满足他想要做的事情，而且可能有一个 xmlid 会起作用，但我不明白你是如何把它从写出来的。他展示的示例在 HTML 4 或 HTML 5 中都不起作用，并且没有办法使其完成所显示的内容。
8赞
BoltClock
6/18/2012
我为这个答案投了赞成票，因为它回答了这个问题：“你能为一个元素分配多个 ID 吗？但是，我应该补充一点，这不仅仅是规格;如公认的答案所示，当涉及到 HTML/XHTML 本身时，规范说您只能使用该属性分配 ID。澄清一下，该属性（实际上是默认命名空间之外的任何属性）在 XHTML 中无效。但是，正如您引用的 HTML5 规范一样，这绝不会导致静默失败;它仍然会将 ID 添加到此元素，使其匹配 .idxml:idxml:id="bar"bar#bar
3赞
Eduardo La Hoz Miranda
3/14/2014
这就是为什么您始终必须向下滚动并阅读所有线程的原因。
3赞
James
4/19/2012
#12
从技术上讲，我想说是的，因为实际上呈现的内容在技术上总是依赖于浏览器。大多数浏览器都试图尽可能地遵守规范，据我所知，CSS规范中没有任何内容反对它。我只保证在任何其他解释器介入之前发送到浏览器的实际 HTML、CSS 和 JavaScript 代码。
但是，我也说不，因为我通常测试的每个浏览器实际上都不允许你。
如果您需要亲自查看，请将以下内容另存为 .html 文件并在主要浏览器中打开它。在我测试过的所有浏览器中，JavaScript 函数都不会与元素匹配。但是，从 id 标签中删除“hunkojunk”，一切正常。
示例代码
<html>
<head>
</head>
<body>
<p id="hunkojunk1 hunkojunk2"></p>
<script type="text/javascript">
document.getElementById('hunkojunk2').innerHTML = "JUNK JUNK JUNK JUNK JUNK JUNK";
</script>
</body>
</html>
2赞
Alexandr
8/13/2013
#13
从 7.5.2 开始 元素标识符：id 和 class 属性：
id 属性为元素分配一个唯一标识符（该标识符可能 由 SGML 解析器验证）。
和
ID 和 NAME 令牌必须以字母 （[A-Za-z]） 开头，并且可以是 后跟任意数量的字母、数字 （[0-9]）、连字符 （“-”）， 下划线 （“_”）、冒号 （“：”） 和句点 （“.”）。
因此，“id”必须是唯一的，不能包含空格。
0赞
user3266067
3/2/2014
#14
课程是专门为此而设的，并且 以下是您可以理解它的代码：
<html>
<head>
<style type="text/css">
.personal{
height:100px;
width: 100px;
}
.fam{
border: 2px solid #ccc;
}
.x{
background-color:#ccc;
}
</style>
</head>
<body>
<div class="personal fam x"></div>
</body>
</html>
2赞
Snowcrash
4/26/2015
#15
不。
话虽如此，没有什么可以阻止你这样做。但是，您会在各种浏览器上获得不一致的行为。别这样。每个元素一个 ID。
如果要对一个元素进行多个赋值，请使用类（用空格分隔）。
3赞
corysimmons
12/16/2017
#16
否。
从 3.2.3.1 id 属性开始：
该值不得包含任何空格字符。
id="a b"<-- 找到那个 VaLuE 中的空格字符。
也就是说，您可以设置多个 ID 的样式。但如果你遵循规范，答案是否定的。
2赞
Samdom For Peace
10/31/2018
#17
分配给 div 元素的任何 ID 都是唯一的。
但是，您可以在 div 元素的“下”分配多个 ID，而不能“分配给”div 元素。
在这种情况下，您必须将这些 ID 表示为 ID。<span></span>
比如说，你希望同一个 HTML 页面中的两个链接指向页面中的同一个 div 元素。
两个不同的链接
<p><a href="#exponentialEquationsCalculator">Exponential Equations</a></p>
<p><a href="#logarithmicExpressionsCalculator"><Logarithmic Expressions</a></p>
指向页面的同一部分
<!-- Exponential / Logarithmic Equations Calculator -->
<div class="w3-container w3-card white w3-margin-bottom">
<span id="exponentialEquationsCalculator"></span>
<span id="logarithmicEquationsCalculator"></span>
</div>
评论
0赞
Samdom For Peace
8/9/2021
停止编辑我的初始帖子。这是非常正确的。写下你自己的问题答案（发表你的帖子并回答问题），或者对我的帖子提出问题作为评论。别管我最初的帖子。不要编辑它。这是非常正确的。
0赞
Samdom For Peace
8/9/2021
您可以通过访问我的网站来验证我的帖子： www.exponents-logarithms.appspot.com
-1赞
Agboola Feyikemi
1/28/2020
#18
ID 应该是唯一的，因此您只应在页面上使用一次特定 ID。类可以重复使用。
有关详细信息，请查看 HTML id 属性 （W3Schools）。
0赞
willy wonka
5/26/2023
#19
由于部分匹配，您可以通过执行类似于以下示例的操作来获取元素，该示例同时显示 querySelctor 和 querySelctorAll。
在这两种情况下，我还使用了由 * 修改的选择器，该选择器的行为与 id 属性值中包含的部分字符串匹配。
我正在使用 Chrome，这两种解决方案都可以完成它们的工作，但关于浏览器兼容性、良好的编程实践和 w3 标准，我不能说。
如您所见，id 是重复的，并且 id 属性值中也有空格。
document.querySelector("[id*='123']").innerText = 'the first works';
document.querySelectorAll("[id*='nested']")[1].innerText = 'the second works too';
// But if you try
document.getElementById("[id*='beta']").innerText = 'it does not work';
document.getElementById("#beta]").innerText = 'it does not work';
document.getElementById("#alfa beta nested element_123 task_123]").innerText = 'it does not work';
// none of them will work but get `null` instead and so you get an error in console<div id="alfa beta nested element_123 task_123"></div>
<div id="alfa beta nested element_123 task_123"></div>
评论