Fatal编程技术网
  • html/
  • 如果多个不同的HTML元素'；你是不同的元素吗？

如果多个不同的HTML元素'；你是不同的元素吗？

html dom

如果多个不同的HTML元素'；你是不同的元素吗？,html,dom,Html,Dom,如果多个HTML元素属于不同的元素类型，它们是否可以具有相同的ID？这样的情景有效吗？例如： div#foo span#foo a#foo 否。具有相同id的两个元素无效。ID是唯一的，如果您希望这样做，请使用类。不要忘记，通过使用一个空格作为delimeter，元素可以有多个类： <div class="myclass sexy"></div> 否 元素ID在整个文档中应该是唯一的。不，ID必须是唯一的。您可以为此目的使用类 <div class="a" /

如果多个HTML元素属于不同的元素类型，它们是否可以具有相同的ID？这样的情景有效吗？例如：

div#foo
span#foo
a#foo
否。具有相同id的两个元素无效。ID是唯一的，如果您希望这样做，请使用类。不要忘记，通过使用一个空格作为delimeter，元素可以有多个类：

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


div.a{font:…；}
/*或者只是：*/
.a{prop:value；}
一个班级中有可能有多个学生拥有相同的卷号/身份证号吗？在HTML
id
中，属性是这样的。您可以对它们使用相同的类。e、 g:

<div class="a b c"></div>
<div class="a b c d"></div>
诸如此类。

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

例如：

（提供给现代浏览器）文章#主要内容{风格单一}
（服务于遗产）div#主要内容{另一种风格}

可能是反模式。我只想把这里作为一个魔鬼代言人。

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

ID应该是唯一的吗？对

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

无论如何，至少在Chrome 26.0.1410.65、FireFox 19.0.2和Safari 6.0.3上，如果有多个元素具有相同的ID，jquery选择器（至少）将返回具有该ID的第一个元素

e、 g

请参阅以获取测试。

即使元素的类型不同，也会导致一些严重问题

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

因此，始终为
HTML
元素分配不同的
id
。这将使你免受奇怪事物的伤害。：）

嗯，使用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>

第9行第14列：重复ID x。是
警告行8，第14列：ID x的第一次出现在这里。巴里
错误行10，第14列：重复ID x。在这里
警告行8，第14列：ID x的第一次出现在这里。巴里
。。。但是OP特别指出-不同的元素类型如何。因此，请考虑下面的HTML……/P> 
<!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

第9行第16列：重复ID x。在这里
警告行8，第14列：ID x的第一次出现在这里。巴里
结论:
在任何一种情况下（相同的元素类型，或不同的元素类型），如果id被多次使用，则它被视为无效的HTML5。

HTML的官方规范声明id标记必须是唯一的，官方规范还声明，如果渲染可以完成，则必须（即，没有“错误”之类的事情）在HTML中，只有“无效”HTML）下面是id标记在实践中的实际工作方式。它们都是无效的，但仍然有效：

这：

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

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

据我所知，这个问题目前还不在任何人的雷达上，但它是真实的

这：

1
也可以在所有浏览器中进行良好渲染。但是，如果您尝试document.getElementById（'unique-allow'），则仅使用您以这种方式定义的第一个id；在上面的示例中，您将返回null（在Chrome、FireFox和IE11上测试）

这：

2
但是，与可以用空格分隔的类标记不同，id标记允许空格，因此上述元素的id实际上是“unique-unique-two”，如果单独向dom请求“unique”或“unique-two”，则返回null，除非dom中另有定义（在Chrome、FireFox和IE11上测试）。

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

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

它是有效的HTML吗？

不。到的时候这仍然是正确的。但是，规范中还说明了
getElementById
，使得在文档无效的情况下，行为没有未定义

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

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

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

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

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

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

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

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

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

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

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

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

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.