一个HTML元素可以拥有多个id吗？

Question

一个HTML元素可以拥有多个id吗？

367

我理解在HTML/XHTML页面中，每个id必须是唯一的。

对于给定的元素，我能否给它分配多个id？

<div id="nested_element_123 task_123"></div>

我意识到只需使用类就可以轻松解决问题。我只是好奇以这种方式使用id。

- webmat

我已经在HTML、CSS和JS上编程了一段时间，我经常需要使用多个类，但我从来没有使用过多个ID，也没有必要使用多个ID。尽管如此，我有点好奇：我可以问一下，在你需要使用多个ID的情况下，你遇到了什么情况吗？ - willy wonka

1

在罕见的情况下，当一个人没有访问源HTML的权限（例如构建代理）时，如果您需要定位具有多个ID的元素，则CSS选择器[id="one two three"]应该定位该元素。 - JisuKim82

这实际上取决于所引用的规范（以及可能实现的规范）和上下文。例如：https://www.w3.org/TR/html5/dom.html#the-id-attribute 和旧版规范中指示“是”的那个？https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute - Mark Schultheiss

1

@willywonka 我知道这可能已经过去了两年，但我刚刚在搜索答案时遇到了这篇文章，并且想与你分享我遇到的情况，因为你从来没有得到答案。我正在做一个自由编码营地的项目，创建一个JS计算器。他们希望输出的id为"display"，以便他们可以针对它运行测试，但我正在创建一个带有两个显示器的科学计算器：＃输入和＃输出，因此＃输入显示器还需要“display”的id值，除了我想要为其提供的“input”值以保持一致性。 - Tara

1

嗨 @TaraStahler 欢迎你。据我所知，如果您使用记号 <... id="input" id="display" ...>，浏览器只会呈现第一个，而且 id 不能包含空格（也不能包含制表符），因此记号 <...id="input display" ...> 根本不合法。我在 Chrome 控制台中尝试过 JavaScript，它在两种情况下都返回 "Uncaught ReferenceError: display is not defined"。仅第一种情况通过使用第一个 id 获取对象返回，第二种情况则无法实现。在第二种情况下，两个 id 都无法实现。也许您需要重构您的代码？ - willy wonka

显示剩余2条评论

19个回答

224

与大家的说法相反，正确的答案是是的

选择器规范非常明确地说明了这一点：

如果一个元素具有多个ID属性，则在ID选择器的目的下，所有这些属性都必须被视为该元素的ID。可以使用xml:id、DOM3 Core、XML DTD和特定于命名空间的知识的混合来达到这种情况。

编辑

只是为了澄清：是的，XHTML元素可以具有多个ID，例如：

<p id="foo" xml:id="bar">

但是使用空格分隔的方式给相同的id属性赋予多个id是不可能的。

- user123444555621

12

好的回答 - 这下可把猫扔到了鸽子群里。 - TrojanName

4

很不幸，这里起作用的不是 CSS 规范。对于 HTML/XHTML，你需要查看该规范，而规范明确指出每个元素最多只能有一个 id，并且该 id 必须在页面上是唯一的：http://www.w3.org/TR/html401/struct/global.html#h-7.5.2（适用于 HTML 4）。 - tvanfosson

11

令人惊讶的是，HTML4规范并没有说每个元素最多只能有一个id。如果你查看HTML5规范，甚至会发现“该规范并不排除一个元素有多个ID，如果其他机制（例如DOM Core方法）可以以不与id属性冲突的方式来设置元素的ID。”（这与CSS规范相对应）。 - user123444555621

8

我投票支持这个回答，因为它回答了问题：“是否可以给一个元素分配多个ID？” 但我应该补充一点，这超出了纯粹的规范；正如被接受的答案所示，当涉及HTML/XHTML本身时，规范只允许使用"id"属性来分配标识符。为了澄清，"xml:id"属性（实际上任何在默认命名空间之外的属性）在XHTML中是无效的。然而，正如你从HTML5规范中引用的那样，这并不会以任何方式导致"xml:id='bar'"默默失败；它仍然会将"bar" ID添加到此元素，使其能够匹配"#bar"。 - BoltClock

3

这就是为什么你总是需要向下滚动并阅读所有帖子。 - Eduardo La Hoz Miranda

显示剩余4条评论

27

编号。虽然W3C对HTML 4的定义似乎没有明确涵盖您的问题，但名称和ID属性的定义表示标识符中不允许有空格：

ID和NAME令牌必须以字母（[A-Za-z]）开头，可以后跟任意数量的字母、数字([0-9])、连字符("-")、下划线("_")、冒号(":")和句点(".")。

- acrosman

25

我的理解一直是：

ID 是单次使用的，只应用于一个元素...
- 每个 ID 都被归属为唯一标识符，只可用于一个元素。
类可以被多次使用...
- 因此，它们可以应用于多个元素，同样地，一个元素也可以有多个类（即多个类）。

- Ross

26

我不认为这个回答符合问题的要求。问题是：“一个元素能否使用多个ID？” - Kevin

4

这个回答假设OP正在面临XY问题，并可以帮助那些试图通过ID实现类行为的人——无论出于何种原因。 - Mahdi

你提到了“单次使用”，但这可能会引起混淆。使用一个元素的id多次是经常且正确的做法。我认为你所说的是另一种解释，即：应该为一个元素使用一个（且仅一个）id，并且仅限于该元素。 - Mbotet

22

不会。每个DOM元素，如果它有一个id，就有一个单一、独特的id。你可以使用类似下面的方法来近似：

<div id='enclosing_id_123'><span id='enclosed_id_123'></span></div>

然后使用导航来获得您真正想要的内容。

如果您只是想应用样式，则类名更好。

- tvanfosson

那样会破坏验证。 - Aupajo

20

不是我。 :-) 我不确定你所说的“破坏验证”的意思是什么？div和span的ID不同（一个是包含，一个是被包含），因此没有重复ID的问题。也许有些人没有仔细阅读。 - tvanfosson

5

抢劫银行是违法的，而软件问题从来不会违法。这又涉及到虚拟现实与现实问题了 :-P - TrojanName

@BrianFenton 调试别人的代码让我意识到这应该是非法的。我认为如果没有充分的理由不遵循规范，应该判处5年监禁。 - ProblemsOfSumit

20

每个元素只能有一个ID，但是可以有多个类。但不要有多个class属性；将多个class值放入一个属性中。

<div id="foo" class="bar baz bax">

是完全合法的。

- AmbroseChapel

4

不，一个标签不能拥有多个id，但我曾经看到一个带有name属性和id属性的标签在某些应用程序中被视为相同的属性。

- tpower

2

在IE浏览器中，在IE8之前是可以的。但现在在标准模式下已经修复了这个错误。getElementById()曾经会不正确地返回与名称和ID大小写不敏感匹配的元素。 - scunliffe

3

不，如果你想走这条路，应该使用嵌套的DIV。此外，即使你可以这样做，当你运行document.getElementByID()时，想象一下会引起多大的混乱。如果有多个ID，它会抓取哪一个？

在稍微相关的话题上，你可以给一个DIV添加多个类。请参见Eric Myers在讨论中的说明。

http://meyerweb.com/eric/articles/webrev/199802a.html

- Anjisan

3

难道它不会获取你在括号中指定的ID吗？getElementById();没有字符串指定要获取什么，它什么也不做！getElementById('foo');将获取ID为foo的元素！多个ID在这里并不重要。它仍然会寻找“foo”。 - Rin and Len

3

不行。

来自 3.2.3.1 id属性:

该值不能包含任何空格字符。

id="a b" <-- 在这个 VaLuE 中找到了空格字符。

话虽如此，您可以为多个ID设置样式。但如果您遵循规范，答案是不行的。

- corysimmons

3

从技术上讲，实际呈现的内容始终取决于浏览器。大多数浏览器尽可能地遵循规范，据我所知，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>

- James

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- timmow · Accepted Answer

从 XHTML 1.0规范中可以发现，在XML中，片段标识符属于ID类型，每个元素只能有一个ID属性。因此在XHTML 1.0中，id属性被定义为ID类型，为了确保XHTML 1.0文档是良构的XML文档，以上所列元素定义片段标识符时必须使用id属性。请参阅HTML兼容性指南，以了解如何在将XHTML文档作为text/html媒体类型提供时，确保这样的锚点具有向后兼容性。