html元素可以有多个ID吗？

310

我了解ID在HTML / XHTML页面内必须唯一。

我的问题是，对于给定的元素，我可以为其分配多个ID吗？

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

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

html  xhtml  standards-compliance 
— 网络垫
source
我几乎在html css和js中编程了一段时间，我经常需要使用多个类，但实际上我从来没有使用过，我也不需要使用多个ID。不过，我有点好奇：请问您在这种情况下需要多个ID的情况如何？
— Willy wonka
在极少数情况下，当您无法访问源HTML时（例如，构建代理时），如果您需要定位具有多个ID的元素，则css选择器[id =“ one two three”']应该定位到该元素。
— JisuKim82
这实际上取决于所引用的规范（并且可能已实现）以及其中的上下文。即w3.org/TR/html5/dom.html#the-id-attribute和表示“是”的较旧版本？w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
— Mark Schultheiss
1
@willywonka我知道这就像2年后，但是我刚遇到这篇文章以寻找答案，就好像与我分享了遇到的情况一样，因为您从未得到答案。我正在为freecodecamp创建一个项目，以创建一个JS计算器。他们希望输出的ID为“显示”，以便可以对其进行测试，但是我正在创建一个具有2个显示的科学计算器：#input和#output，因此#input显示还需要“ display” ID除了“输入”的值外，我还想保持一致性。
— 塔拉·斯塔勒
1
嗨，@ TaraStahler，欢迎您。据我所知，浏览器仅在使用符号<... id =“ input” id =“ display” ...>时才会呈现第一个，而且ID不得包含空格（也不能使用制表符），因此符号<... id =“ input display” ...>完全无效。刚刚在Chrome控制台上使用javascript进行了实验，在两种情况下均返回“ Uncaught ReferenceError：未定义显示”。如果我使用第一个ID获得对象，则只有第一种情况返回该对象，而第二种情况则无法实现。在第二种情况下，所有ID均无法实现。也许您需要重构代码？
— 威利·旺卡

Answers:

205

否。根据XHTML 1.0规范

在XML中，片段标识符的类型为ID，每个元素只能有一个类型为ID的属性。因此，在XHTML 1.0中，将id属性定义为ID类型。为了确保XHTML 1.0文档是结构良好的XML文档，当在上面列出的元素上定义片段标识符时，XHTML 1.0文档必须使用id属性。有关确保在将XHTML文档作为text / html媒体类型提供服务时确保此类锚向后兼容的信息，请参见HTML兼容性指南。

— mm
source
7
“片段标识符的类型为ID，每个元素只能有一个类型为ID的属性。” 它在这里说，单个属性和属性与属性的值不同。它没有说任何属性值在任何情况下都不应假定通过空格或字符分隔来实现多值。尽管在规范中它表示为了向后兼容，它不得在属性值中包含空格字符Fragment Identifiers（w3.org/TR/xhtml1/#guidelines）因此，如果要表示多值ID，则必须以不同的方式表示
— Richeve Bebedor
2
取决于您所引用的规格。“此规范并不排除具有多个ID的元素...” w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
— Mark Schultheiss
请参阅此处删除该句子的位置w3.org/TR/html5/dom.html#the-id-attribute
— Mark Schultheiss
好的，我使这个答案达到了200个最高分。没关系。我会看看自己。
— KhoPhi
196

相反的是其他人说，正确的答案是YES

该选择器的规格是非常清楚这一点：

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

编辑

需要澄清的是：是的，一个XHTML元素可以有多个id，例如

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

但是无法id使用以空格分隔的列表将多个ID分配给同一属性。

— 用户123444555621
source
7
好的答案-现在这把猫放到了鸽子之间。
— TrojanName 2011年
3
不幸的是，这里不是CSS规范。对于HTML / XHTML，您必须查看该规范，那里的规范肯定说每个元素最多可以有一个ID，并且该ID在页面上必须是唯一的：w3.org/TR/html401/struct/global。 html＃h-7.5.2（适用于HTML 4）
— -tvanfosson
9
@tvanfosson：令人惊讶的是，HTML4规范没有说每个元素最多可以有一个id。如果您查看HTML5规范，甚至会发现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.（与CSS规范相对应）
— user123444555621 2011年
1
您只能拥有一个id属性，并且id属性内容的格式不得包含任何空格。在问题的上下文中-给元素2个“ HTML” ID-在HTML 4或HTML 5中都不可能做到这一点。您假设给它一个与CSS兼容的ID就足以他正在尝试做什么，可能是拥有一个xmlid可以正常工作，但是我看不出您是如何从编写的问题中得到这个的。他显示的示例在HTML 4或HTML 5中均无法使用，并且无法使其完成所显示的内容。
— tvanfosson
6
我回答了这个问题，回答了这个问题：“ 您可以为一个元素分配多个ID吗？” 但是，我要补充一点，这超出了纯粹的规范。如已接受的答案所示，对于HTML / XHTML本身，规范说明您只能使用id属性分配ID 。为了澄清，该xml:id属性（实际上是默认名称空间之外的任何属性）在XHTML中无效。但是，正如您从HTML5规范中引用的那样，这绝不会导致xml:id="bar"默默地失败；仍会bar向该元素添加ID，以使其与匹配#bar。
— BoltClock
28

我的理解一直是：

  • ID是一次性使用的，仅应用于一个元素...

    • 每个属性都作为唯一标识符（仅）一个元素。

  • 类可以多次使用 ...

    • 因此，它们可以应用于不止一个元素，并且类似但又不同，每个元素可以有一个以上的类（即多个类）。
— 罗斯
source
18
我认为这不代表该问题的答案。问题是：“单个元素可以使用多个ID吗？”
— 凯文（Kevin）
4
@kevin此答案假定OP面临XY问题，并且可以肯定地帮助尝试通过ID实现类行为的人-不管出于何种原因。
— 马赫迪
您指的是“单次使用”，但可能会引起混淆。您可以并且是正确且正确的事物，通过其ID多次使用一个元素。我认为您要解决的是另一种解释，即：您只对一个元素使用一个（并且仅一个）id，而对该元素仅使用。
— Mbotet
27

不会。 虽然w3c中HTML 4 的定义似乎没有明确涵盖您的问题，但是name和id属性的定义表明标识符中没有空格：

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

— 杂技演员
source
20

不会。每个DOM元素（如果有ID）都有一个唯一的ID。您可以使用类似以下内容的方法进行估算：

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

然后使用导航获取您真正想要的。

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

— 特凡福森
source
虽然那样会破坏验证。
— 奥帕霍
3
这个答案有什么非法之处？有人可以解释否决票吗？
— tpower
19
不是我。:-)我不确定您对打破验证的意思吗？div和span的id是不同的（封闭与封闭），因此重复的id没有问题。也许有些人阅读不紧密。
— tvanfosson，
4
抢劫银行是非法的，软件发行绝不是非法的。原来是虚拟现实还是现实问题再次出现：-P
— TrojanName
@BrianFenton调试其他人的代码使我意识到它应该是非法的。我说有5年徒刑是因为没有充分理由不遵守规范。
— ProblemsSuSumit
18

每个元素只能有一个ID，但实际上可以有多个类。但是没有多个类属性，请将多个类值放入一个属性中。

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

是完全合法的。

— 安布罗斯教堂
source
4

不，您不能为一个标签使用多个ID，但是我看到一个标签具有一个name属性和一个id属性，某些应​​用程序将其视为相同。

— 力量
source
1
在IE8之前的IE中，是的。但他们现在已在标准模式下修复了该错误。getElementById（）用于错误地返回不区分大小写的名称和ID匹配的元素。
— scunliffe
4

不，如果要沿着该路径行驶，则应使用嵌套的DIV。此外，即使可以，也请想象一下在运行document.getElementByID（）时会引起的混乱。如果有多个ID，它将获取什么ID？

在一个稍微相关的主题上，您可以将多个类添加到DIV中。请参阅以下网址的Eric Myers讨论：

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

— 安吉山
source
1
它不会获得您在括号之间指定的ID吗？getElementById();没有指定获取内容的字符串就什么也不做？getElementById('foo');将获得以foo作为ID的元素！多个ID在这里无关紧要。它仍然会寻找“ foo”。
— Rin和Len
3 
Any ID assigned to a div element is unique.
However, you can assign multiple IDs "under", and not "to" a div element.
In that case, you have to represent those IDs as <span></span> IDs.

Say, you want two links in the same HTML page to point to the same div element in  the page.

The two different links
<p><a href="#exponentialEquationsCalculator">Exponential Equations</a></p>         

<p><a href="#logarithmicExpressionsCalculator"><Logarithmic Expressions</a></p>

Point to the same section of the page. 
<!-- Exponential / Logarithmic Equations Calculator -->
<div class="w3-container w3-card white w3-margin-bottom">      
   <span id="exponentialEquationsCalculator"></span>
   <span id="logarithmicEquationsCalculator"></span>
</div>
— 和平的赞美
source
2

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2

id属性为元素分配唯一标识符（可以由SGML解析器验证）。

和

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

因此，“ id”必须唯一且不能包含空格。

— 亚历山大
source
1

我想从技术上说是的，因为从技术上讲，渲染的内容实际上始终取决于浏览器。据我所知，大多数浏览器都尽力保持其最佳规格，而据我所知，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>
— 詹姆士
source
1

没有。

话虽如此，没有什么可以阻止您这样做。但是您会在各种浏览器中得到不一致的行为。不要这样 每个元素1个ID。

如果要对一个元素进行多次分配，请使用类（以空格分隔）。

— 雪灾
source
0

这很有趣，但据我所知答案是肯定的。我看不到为什么需要嵌套ID，因为您通常将其与具有相同嵌套ID的另一个元素交叉。如果没有，那就没有意义了。

— 罗伯特·K
source
1
我也希望使用2 id来实现向后兼容。例如，以前的版本中以前是第8条，但现在称为具有一个元素的2个id的node-8，则会阻止编码变通方法以使其向后兼容。虽然两个ID都将保留为唯一标识符。
— FLY 2012年
0

我知道今年已经一岁了，但是我自己对此感到很好奇，我相信其他人也会在这里找到自己的路。正如其他人在我之前所说的那样，简单的答案是“不”。一个元素不能有一个以上的ID，并且一个ID在一个页面中不能多次使用。尝试一下，您会发现它不起作用。

回应tvanfosson关于在两个不同元素中使用相同ID的回答。据我所知，一个ID只能在页面中使用一次，无论它是否附加到其他标签上。

根据定义，需要一个ID的元素应该是唯一的，但是如果您需要两个ID，那么它并不是唯一的，而需要一个类。

— 泰勒
source
1
但是，如果你读tvanfosson的回答，两个ID明显不同“enclosing_id_123” =“enclosed_id_123”！
— 奔
0

类是专门为此设计的，这是您可以从中了解的代码 

<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>
-4

我认为您不能有两个ID，但应该可以。两次使用相同的身份证是不同的情况……就像两个人使用同一本护照。但是，一个人可能有多本护照...之所以要这样做，是因为我遇到的情况是，一个雇员可以同时担任多个职务。假设具有id =“ sysadm teamcoordinator”的“ sysadm”和“ team coordinator”可以让我从其他页面引用它们，以便employee.html＃sysadm和employee.html＃teamcoordinator可以到达同一地点...某天某人在sysadm仍为sysadm的情况下，否则可能会接管团队协调员的职能……那么，我只需要更改employee.html页面上的ID，但就像我说的那样-它不起作用:(

— 奥莱·里达·约翰森
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.