发表新帖
发表新帖

Can multiple different HTML elements have the same ID if they're different elements?

后端 未结
关注
16 1884
无人及你
无人及你 2020-11-21 05:30

Can multiple HTML elements have the same ID if they\'re of different element types? Is a scenario like this valid? Eg:

div#foo
span#foo
a#foo
相关标签:
16条回答
  • 悲&欢浪女
    2020-11-21 05:56

    The official spec for HTML states that id tags must be unique AND the official spec also states that if the render can be completed, it must (i.e. there are no such thing as "errors" in HTML, only "invalid" HTML). So, the following is how id tags actually work in practice. They are all invalid, but still work:

    This:

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

    Renders fine in all browsers. However, document.getElementById only returns an object, not an array; you will only ever be able to select the first div via an id tag. If you were to change the id of the first div using JavaScript, the second ID would then be accessible with document.getElementById (tested on Chrome, FireFox & IE11). You can still select the div using other selection methods, and it's id property will be returned correctly.

    Please note this above issue opens a potential security vulnerability in sites that render SVG images, as SVGs are allowed to contain DOM elements, and also id tags on them (allows script DOM redirects via uploaded images). As long as the SVG is positioned in the DOM before the element it replaces, the image will receive all JavaScript events meant for the other element.

    This issue is currently not on anyone's radar as far as I know, yet it's real.

    This:

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

    Also renders fine in all browsers. However, only the first id you define this way is utilized, if you tried document.getElementById('unique-also'); in the above example, you would be returned null (tested on Chrome, FireFox & IE11).

    This:

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

    Also renders fine in all browsers, however, unlike class tags that can be separated by a space, the id tag allows spaces, so the id of the above element is actually "unique unique-two", and asking the dom for "unique" or "unique-two" in isolation returns null unless otherwise defined elsewhere in the DOM (tested on Chrome, FireFox & IE11).

    0 讨论(0)
  • 执笔经年
    2020-11-21 06:02

    Well, using the HTML validator at w3.org, specific to HTML5, IDs must be unique

    Consider the following...

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

    the validator responds with ...

    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>

    ... but the OP specifically stated - what about different element types. So consider the following 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>

    ... the result from the validator is...

    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

    Conclusion:

    In either case (same element type, or different element type), if the id is used more than once it is not considered valid HTML5.

    0 讨论(0)
  • 眼角桃花
    2020-11-21 06:04

    No. two elements with the same id are not valid. IDs are unique, if you wish to do something like that, use a class. Don't forget that elements can have multiple classes by using a space as a delimeter:

    <div class="myclass sexy"></div>
    0 讨论(0)
  • 北海茫月
    2020-11-21 06:04

    And for what it's worth, on Chrome 26.0.1410.65, Firefox 19.0.2, and Safari 6.0.3 at least, if you have multiple elements with the same ID, jquery selectors (at least) will return the first element with that ID.

    e.g.

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

    and

    alert($('#one').size());

    See http://jsfiddle.net/RuysX/ for a test.

    0 讨论(0)
  • 梦毁少年i
    2020-11-21 06:06

    SLaks answer is correct, but as an addendum note that the x/html specs specify that all ids must be unique within a (single) html document. Although it's not exactly what the op asked, there could be valid instances where the same id is attached to different entities across multiple pages.

    Example:

    (served to modern browsers) article#main-content {styled one way}
    (served to legacy) div#main-content {styled another way}

    Probably an antipattern though. Just leaving here as a devil's advocate point.

    0 讨论(0)
  • 鱼传尺愫
    2020-11-21 06:07

    Nope, IDs have to be unique. You can use classes for that purpose

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

div.a {font: ...;}
/* or just: */
.a {prop: value;}
    0 讨论(0)
 看不清?
提交回复
热议问题