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

139

这样的情况有效吗？

div#foo
span#foo
a#foo

html dom

— 无所不知
source

23

尽管有时可能，但它永远无效。

— Paul Creasey

2

综上所述，值得注意的是，它很可能在文档中遇到多个相同的ID，这些ID具有用户代理创建的内容（请考虑框架，mv *，react，polymer ...）。那就是如果有人想知道为什么一个看起来非常专业的XYZ网站充满了这样的不良做法编码。

— Lukasz Matysiak '17

180

没有。

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

— ak
source

85

不这样做的后果是什么？

— corsiKa

16

@corsiKa结果是未定义的行为，例如，当存在多个#foos时，document.getElementById（“＃foo”）或$（“＃foo”）返回什么？你会碰到能够与JS这些元素工作中的问题，将它们作为选择到图书馆/原料药/ Flash等

— mrooney

76

这是不正确的。完全可能有多个具有相同ID的元素。通常，这不是最佳做法，但确实有其偶尔的用途。每个人似乎都在引用选择器的工作原理，如果您知道自己的ID会冲突，那么可以将选择器与父级一起使用，其中父级下的ID是唯一的。例如$('div#car span#size)和$('div#truck span#size')。

— BJury 2014年

18

为什么在上课时甚至为此使用多个相似的ID？

— Max Yari 2014年

6

是的，实际上，可以使用类来替换多个ID。但是，类旨在用于应用样式，而不是标识元素，从而使名称的范围更加广泛，因此可能会重叠。特别是在使用第三方库的情况下。作为“标识符”的id并不打算相乘，因此显然需要两者之间的某些东西。实际用途是将页面/域的各个部分组成单独的逻辑单元。因此需要使用（至少）2层标识。

— Alen Siljak，2015年

85

我认为某些东西应该是唯一的还是必须是唯一的（即由网络浏览器强制执行）之间存在区别。

ID应该是唯一的吗？是。

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

— 金金
source

6

Chrome也是如此（撰写此评论时为v22）。：D

— omninonsense

27

根据规范，这是必须的，而不应该。（它在大多数浏览器中仍然可以使用吗？是。它是有效的HTML吗？否。另外，对于getElementById，在这种情况下undefined，结果是，这意味着无法告诉浏览器如何选择对其进行处理。）

— leo

2

@leo但是，这是现实世界，浏览器不完全符合标准。在这种情况下，这可能是一件好事，因为没有理由强制使用唯一的ID。

— BJury 2014年

1

在HTML5中，规范getElementById实际上确实定义了必须返回具有给定ID 的第一个元素（无论如何，这是所有浏览器当前如何处理这种情况的方式）-有关更多信息，请参见下面的答案。

— mltsy

1

不要哭，使用jQuery。@leo

— 马克西玛Alekz

67

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

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

它是有效的HTML吗？

否。从HTML 5.1规范开始，这仍然是正确的。但是，规范还说getElementById 必须返回具有给定ID 的第一个元素，从而在无效文档的情况下使行为不明确。

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

大部分（如果不是全部）的浏览器选择，仍然不选择与给定的ID，打电话时的第一要素getElementById。大多数通过ID查找元素的库都会继承此行为。大多数（如果不是全部）浏览器也应用由id选择器分配的样式（例如#myid）具有指定ID的所有元素。如果这是您的期望和意图，那么就不会有意外的后果。如果您期望/打算进行其他操作（例如，要返回具有该ID的所有元素，或仅将样式应用于一个元素），则将无法满足您的期望，并且依赖这些期望的任何功能都将失败。

一些JavaScript库也有不符合预期，当多个元素具有相同的ID（见wootscootinboogie的评论关于d3.js）

结论

最好遵循标准，但是如果您知道您的代码在当前环境中可以正常工作，并且这些ID以可预测/可维护的方式使用，则只有两个实际原因不这样做：

为避免出现错误的机会，并且当多个元素具有相同的ID时，您实际上使用的其中一个库确实会发生故障。
为了保持您的网站/应用程序与将来可能会遇到的库或服务（或开发人员！）的向前兼容性，当多个元素具有相同的ID时，它们确实会发生故障-这是合理的可能性，因为从技术上讲，这是无效的HTML。

力量属于您！

— ts
source

极好的答案。坚持标准永远是最好的。

— EKanadily

25

即使元素的类型不同，也可能导致严重的问题。

假设您有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事件处理程序设置。不幸的是，这不会发生。只有第一个按钮会调用点击处理程序。单击其他2则不执行任何操作。好像它们根本不是按钮！

因此，始终IDs为HTML元素分配不同的内容。这将使您免受奇怪的事情的困扰。:)

<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');
    });
});

— 列尼尔·马卡费里
source

如果我有一个已经在变量中引用的“ #content”，以及只有一会儿的＃my-div #content，之后我删除了所引用的节点却忘记了它的变量，该怎么办？ div #content执行myDiv.outerHTML = myDiv.innerHTML来替换原始内容。这省去了将#content的所有样式和内容硬拷贝到#decoy中并执行相同操作的需要。这在进行过渡时很有意义。

— 德米特里

这意味着，即使我使用“ append”添加具有相同id的多个元素，DOM也仅将第一个元素视为真实元素，理想情况下为1 ID = 1 Element

— Karan Kaw

22

否。两个具有相同ID的元素无效。ID是唯一的，如果您想做类似的事情，请使用一个类。不要忘记，通过使用空格作为分隔符，元素可以具有多个类：

<div class="myclass sexy"></div>

— 瞪羚
source

12

HTML的官方规范指出id标签必须是唯一的，并且官方规范还指出，如果可以完成渲染，则它必须（即，HTML中没有“错误”之类的东西，只有“无效” HTML）。 因此，以下是id标签在实践中的实际工作方式。它们都是无效的，但仍然可以工作：

这个：

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

在所有浏览器中均可正常渲染。但是，document.getElementById仅返回一个对象，而不返回一个数组。您将只能通过id标签选择第一个div。如果您要使用JavaScript更改第一个div的ID，则可以使用document.getElementById（在Chrome，FireFox和IE11上测试）访问第二个ID。您仍然可以使用其他选择方法选择div，它的id属性将正确返回。

请注意，此问题在呈现SVG图像的网站中打开了一个潜在的安全漏洞，因为允许SVG包含DOM元素以及它们上的id标签（允许通过上传的图像重定向脚本DOM）。只要SVG在替换元素之前位于DOM中，该图像就会收到所有用于另一个元素的JavaScript事件。

据我所知，这个问题目前尚无人问津，但这是真实的。

这个：

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

在所有浏览器中也可以正常显示。但是，如果尝试了document.getElementById（'unique-also'）;，则仅使用您以此方式定义的第一个 ID。在上面的示例中，您将返回null（在Chrome，FireFox和IE11上测试）。

这个：

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

在所有浏览器中也可以正常显示，但是，与可以用空格分隔的类标签不同，id标记允许使用空格，因此上述元素的id实际上是“唯一唯一二”，并向dom请求“唯一”或单独的“唯一二”返回null，除非在DOM的其他地方另外定义（在Chrome，FireFox和IE11上测试）。

— 尼克·斯蒂尔
source

1

“ id标记允许空格”-尽管根据规范，“该值不得包含任何空格字符”。

— 怀特先生

我同意。但是，有规范，也有浏览器的操作方式。从历史上看，浏览器将规范视为目标，但对许多项目并不严格。我认为他们这样做是因为，如果符合规范，将会破坏许多现有站点或其他内容。我首先提到，尽管这些方法有效，但它们是无效的。

— 尼克·斯蒂尔

5

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

例：

（适用于现代浏览器）article＃main-content { 样式化 }
（适用于旧版）div＃main-content { 样式化另一种 }

不过可能是反模式。只是作为恶魔的拥护者离开这里。

— 抢劫
source

1

好点子。尽管应该将动态生成的内容插入到另一个页面中，但应该完全避免使用id。ID就像编程语言中的全局变量一样，您可以使用它们，并且在某些有效情况下，它是简化事情的好办法。在进行黑客攻击之前考虑立即进行操作是一种不错的做法。

— Psycho BRM

4

值得一提的是，至少在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/。

— Denishaskin
source

除非您使用更复杂的选择器，例如div#oneThat，否则当然不会更改其无效的事实。

— 凯文B

可能这个答案是正确的，我是根据经验说的。

— Dibyanshu Jaiswal 2015年

4

好吧，使用w3.org上的HTML验证程序（特定于HTML5），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特别声明-不同的元素类型呢？因此，请考虑以下HTML ...

<!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，则认为该ID不是有效的HTML5。

— 巴里皮克
source

2

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

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

展开摘要

— 玛莉丝·伊勒佩鲁玛
source

1

我认为您不能这样做，因为Id是唯一的，您必须将其用于一个元素。您可以为此目的使用课堂

— 贾纳拉维
source

1

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

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

展开摘要

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

— 加纳什·菲克
source

0

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

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

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

— 皮哈格
source

0

班级中是否可能有不止一个学生具有相同的Roll / Id no？在HTML中的id属性是这样的。您可以为他们使用相同的类。例如：

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

等等。

— 密码悖论
source

0

通常，最好不要在html页面中多次使用相同的ID。即使这样，也可以在一个页面中多次使用相同的ID。但是，当您将ID用作URI / URL的一部分时，如下所示：

https://zh.wikipedia.org/wiki/FIFA_World_Cup#2015_FIFA_corruption_case

并且如果ID（'2015_FIFA_corruption_case'）仅用于网页中的一个（跨度）元素：

<span class="mw-headline" id="2015_FIFA_corruption_case">2015 FIFA corruption case</span>

不会有问题的。相反，同一ID存在多个地方，浏览器会感到困惑。

— 朴钟范
source

0

是的他们可以。

我不知道所有这些响应都已过时，只是打开youtube并检查html。尝试查看建议的视频，您将看到它们都具有相同的ID和重复结构，如下所示：

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

— 惩罚者
source