요소가 다른 여러 HTML 요소가 동일한 ID를 가질 수 있습니까?

이와 같은 시나리오가 유효합니까? :

div#foo
span#foo
a#foo

아니.

요소 ID는 전체 문서 내에서 고유해야합니다.

나는 무언가가 독특해야하는지 아니면 독특해야하는지 (즉, 웹 브라우저에 의해 시행되는) 차이가 있다고 생각합니다.

ID는 고유해야합니까? 예.

ID는 고유해야합니까? 아니요, 적어도 IE와 FireFox는 여러 요소가 동일한 ID를 가질 수 있도록합니다.

여러 요소가 동일한 ID를 가질 수 있습니까?

예-태그가 같은지 여부에 관계없이 브라우저는 여러 요소가 동일한 ID를 가진 경우에도 페이지를 렌더링합니다.

유효한 HTML입니까?

아니요 . HTML 5.1 사양 에서는 여전히 그렇습니다 . 그러나 스펙은 또한 주어진 ID를 가진 첫 번째 요소를 getElementById 리턴해야 하므로 유효하지 않은 문서의 경우 동작이 정의되지 않도록합니다.

이 유형의 유효하지 않은 HTML의 결과는 무엇입니까?

(모든 경우) 대부분의 브라우저를 선택하고 여전히 않는 호출 주어진 ID를 가진 첫 번째 요소를 선택합니다 getElementById. ID로 요소를 찾는 대부분의 라이브러리는이 동작을 상속합니다. 대부분의 (모두는 아님) 브라우저는 또한 id-selector (예 :)로 지정된 스타일을 #myid지정된 ID를 가진 모든 요소에 적용합니다. 이것이 당신이 기대하고 의도하는 것이라면, 의도하지 않은 결과는 없습니다. 다른 것을 기대하거나 의도하지 않으면 (예를 들어 해당 ID를 가진 모든 요소가 반환되거나 스타일이 하나의 요소에만 적용되도록) 기대가 충족되지 않으며 해당 기대에 의존하는 기능이 실패합니다.

일부 자바 스크립트 라이브러리 는 여러 요소가 동일한 ID를 가질 때 충족되지 않을 것으로 예상합니다 ( d3.js에 대한 wootscootinboogie의 의견 참조 )

결론

표준을 준수하는 것이 가장 좋지만, 현재 환경에서 코드가 예상대로 작동하고 이러한 ID가 예측 가능 / 유지 가능 방식으로 사용된다는 것을 알고 있다면 다음과 같은 두 가지 실용적인 이유가 있습니다.

1. 여러 요소가 동일한 ID를 가질 때 사용자가 틀렸을 가능성을 피하기 위해 실제로 사용하는 라이브러리 중 하나 가 오작동합니다.
2. 앞으로 발생할 수있는 라이브러리 또는 서비스 (또는 개발자)와 웹 사이트 / 애플리케이션의 호환성을 유지하려면 여러 요소가 동일한 ID를 가진 경우 오작동을 일으 킵니다. 이는 기술적으로 유효하지 않기 때문에 합리적인 가능성입니다. HTML.

힘은 당신입니다!

요소의 유형이 다르더라도 심각한 문제가 발생할 수 있습니다 ...

동일한 ID를 가진 3 개의 버튼이 있다고 가정하십시오.

<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로 클릭 이벤트 핸들러 설정을 실행합니다. 불행히도 그것은 일어나지 않을 것입니다. 첫 번째 버튼 만 클릭 핸들러를 호출합니다. 클릭 할 때 다른 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');
    });
});

아니요. 동일한 ID를 가진 두 개의 요소는 유효하지 않습니다. ID는 독특합니다. 그런 식으로하고 싶다면 수업을 사용하십시오. 공백을 델리 미터로 사용하여 요소가 여러 클래스를 가질 수 있다는 것을 잊지 마십시오.

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

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 속성이 올바르게 반환됩니다.

유의하시기 바랍니다 SVGs가 그들에 DOM 요소, 또한 ID 태그 (업로드 된 이미지를 통해 스크립트 DOM의 리디렉션을 허용)를 포함 할 수 있습니다으로이 위의 문제는, SVG 이미지를 렌더링 사이트에서 잠재적 인 보안 취약점을 엽니 다. SVG가 요소를 교체하기 전에 DOM에 SVG가있는 한 이미지는 다른 요소에 대한 모든 JavaScript 이벤트를 수신합니다.

이 문제는 현재 내가 아는 한 다른 사람의 레이더에는 해당되지 않지만 실제로 발생합니다.

이:

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

또한 모든 브라우저에서 잘 렌더링됩니다. 그러나 document.getElementById ( 'unique-also')를 시도한 경우이 방법으로 정의한 첫 번째 ID 만 사용됩니다. 위의 예에서는 Chrome, FireFox 및 IE11에서 테스트 한 null 이 반환 됩니다.

이:

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

그러나 공백으로 구분할 수있는 클래스 태그와 달리 id 태그는 공백을 허용하므로 위의 요소의 id는 실제로 "unique unique-two"이고 DOM에 "unique"를 요청합니다. 또는 "unique-two" 는 DOM의 다른 곳에 정의되어 있지 않는 한 null을 반환 합니다 (Chrome, FireFox & IE11에서 테스트).

SLaks 답변은 정확하지만 x / html 사양은 모든 단일 ID가 (단일) html 문서 내에서 고유해야 함을 지정한다는 부록의 참고 사항입니다 . op가 요청한 것과 정확히 일치하지는 않지만 동일한 ID가 여러 페이지의 다른 엔터티에 연결된 유효한 인스턴스가있을 수 있습니다.

예:

(현대 브라우저에 제공됨) article # main-content { 한 가지 방법으로 스타일 지정 }
(기존에 제공됨) div # main-content { 다른 방법으로 스타일 지정 }

아마도 반 패턴입니다. 여기를 악마의 옹호 지점으로 남겨 두십시오.

그리고 가치가있는 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/ 를 참조하십시오 .

글쎄, HTML5에 특정한 w3.org에서 HTML 유효성 검사기를 사용하면 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가 두 번 이상 사용되면 유효한 HTML5로 간주되지 않습니다.

id 대신 클래스 이름을 사용할 수 있습니다. html id는 고유해야하지만 클래스는 고유하지 않아야합니다. 클래스 이름을 사용하여 데이터를 검색하면 js 파일의 코드 줄 수가 줄어들 수 있습니다.

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

나는 ID가 독특하기 때문에 그것을 할 수 없다고 생각합니다. 하나의 요소에 사용해야합니다. 목적에 맞게 수업을 사용할 수 있습니다

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

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

id는 첫 번째 div 요소 만 포함합니다. 따라서 동일한 ID를 가진 여러 요소가 있더라도 문서 개체는 첫 번째 일치 항목 만 반환합니다.

아니요, ID는 고유해야합니다. 그 목적으로 수업을 사용할 수 있습니다

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

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

같은 Roll / Id no를 가진 수업에 한 명 이상의 학생이있을 수 있습니까? HTML에서 id속성과 같이합니다. 당신은 그들을 위해 같은 클래스를 사용할 수 있습니다. 예 :

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

등등.

일반적으로 html 페이지에서 동일한 ID를 여러 번 사용하지 않는 것이 좋습니다. 그럼에도 불구하고 한 페이지에서 동일한 ID를 여러 번 사용할 수 있습니다. 그러나 아래와 같이 ID를 URI / URL의 일부로 사용하는 경우 :

https://ko.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가 여러 곳에 존재하면 브라우저가 혼란 스러울 수 있습니다.

네, 그들은 할 수 있어요.

이 모든 anwer가 구식인지는 모르겠지만 YouTube를 열고 HTML을 검사하십시오. 제안 된 동영상을 살펴보면 다음과 같이 모두 동일한 ID 및 반복 구조를가집니다.

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