html 요소에 여러 개의 ID가있을 수 있습니까?

310

ID는 HTML / XHTML 페이지 내에서 고유해야한다는 것을 이해합니다.

내 질문은 주어진 요소에 대해 여러 ID를 할당 할 수 있습니까?

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

나는 단순히 수업을 사용하여 쉬운 해결책을 가지고 있음을 알고 있습니다. 이 방법으로 ID를 사용하는 것에 대해 궁금합니다.

html  xhtml  standards-compliance 
— 웹 매트
소스
나는 html css와 js에서 거의 한동안 프로그래밍하고 있는데 종종 여러 클래스를 사용해야하지만 실제로는 여러 ID를 사용할 필요가 없습니다. 그럼에도 불구하고 조금 궁금합니다. 여러 가지 상황에서 여러 ID가 필요한 상황을 물어봐도 될까요?
— willy wonka
드문 시나리오에서 소스 HTML에 액세스 할 수없는 경우 (예 : 프록시 구축시) 여러 ID가있는 요소를 대상으로 지정해야하는 경우 CSS 선택기 [id = "one two three" ']가 요소를 대상으로해야합니다.
— JisuKim82
이것은 실제로 인용 된 (그리고 구현되었을 가능성이있는) 사양과 그 내용에 달려 있습니다. 예 : w3.org/TR/html5/dom.html#the-id-attribute 및 "yes"를 나타내는 오래된 것? w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
— Mark Schultheiss
1
@willywonka 나는 이것이 2 년 후인 것을 알고 있지만, 나는 지금이 답변에 대한 검색을 위해이 기사를 보았고 답을 얻지 못했기 때문에 내가 온 시나리오를 공유하는 것처럼 느꼈다. JS 계산기를 만들기 위해 freecodecamp 프로젝트를하고 있습니다. 그들은 출력에 대한 ID가 "디스플레이"가되기를 원하므로 테스트를 실행할 수 있지만 #input 및 #output이라는 두 개의 디스플레이가있는 공학용 계산기를 만들고 있습니다. 따라서 #input 디스플레이 또한 "display"id가 필요합니다 "입력"의 가치에 더하여 가치 일관성을 부여하고 싶습니다.
— 타라 Stahler
1
안녕하세요 @TaraStahler 환영합니다. 내가 아는 한 브라우저는 <... id = "input"id = "display"...> 표기법을 사용하는 경우 첫 번째 브라우저 만 렌더링하며 id에는 공백 (탭)이 없어야합니다. <... id = "input display"...> 표기법은 전혀 유효하지 않습니다. Chrome 콘솔에서 자바 스크립트를 실험 한 결과 두 경우 모두 'Uncaught ReferenceError : display is not defined'가 표시됩니다. 첫 번째 ID로 객체를 얻는 경우 첫 번째 경우 만 객체를 반환하지만 두 번째 경우는 달성 할 수 없습니다. 두 번째 경우에는 ID를 얻을 수 없습니다. 코드를 리팩터링해야합니까?
— willy wonka

답변:

205

보내는 사람 번호 XHTML 1.0 규격

XML에서 조각 식별자는 ID 유형이며 요소 당 하나의 ID 유형 속성 만있을 수 있습니다. 따라서 XHTML 1.0에서 id 속성은 ID 유형으로 정의됩니다. XHTML 1.0 문서가 잘 구조화 된 XML 문서가되도록하려면 XHTML 1.0 문서는 위에 나열된 요소에서 조각 식별자를 정의 할 때 반드시 id 속성을 사용해야합니다. XHTML 문서를 미디어 유형 text / html로 제공 할 때 이러한 앵커가 이전 버전과 호환되는지 확인하는 방법에 대한 자세한 내용은 HTML 호환성 지침을 참조하십시오.

— 티모 우
소스
7
"조각 식별자는 ID 유형이며 요소 당 ID 유형의 단일 속성 만있을 수 있습니다." 여기서는 단일 속성 및 속성이 속성 값과 다릅니다. 어떤 문맥에서든 속성 값이 공백으로 구분되거나 문자 분리를 통해 다중 값을 가정한다고 말하지 않습니다. 사양에서 이전 버전과의 호환성을 위해 속성 값에 공백 문자를 포함해서는 안된다고 말합니다. 조각 식별자 (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
— 마크 Schultheiss
좋아, 나는이 대답을 200 upvote 마크에 부딪쳤다. 괜찮아. 나는 내 자신을 볼 수 있습니다.
— KhoPhi
196

다른 사람들의 말과 달리 정답은 예입니다.

사양 선택기 이것에 대해 매우 분명하다 :

요소에 여러 개의 ID 속성이있는 경우 모든 요소는 ID 선택기의 목적을 위해 해당 요소의 ID로 처리되어야합니다. 이러한 상황은 xml : id, DOM3 Core, XML DTD 및 네임 스페이스 별 혼합을 사용하여 도달 할 수 있습니다. 지식.

편집하다

명확히하기 위해 : 예, XHTML 요소는 여러 개의 id를 가질 수 있습니다.

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

그러나 id공백으로 구분 된 목록을 사용하여 동일한 속성에 여러 ID를 할당 할 수 없습니다.

— 사용자 123444555621
소스
7
큰 대답-이제 그것은 고양이를 비둘기 사이에 두었습니다.
— TrojanName 2016 년
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
1
하나의 id 속성 만 가질 수 있으며 id 속성 내용의 형식에는 공백이 없어야합니다. 요소 2 "HTML"id를 제공하는 질문의 맥락에서 HTML 4 또는 HTML 5에서는이 작업을 수행 할 수 없습니다. CSS와 호환되는 ID를 제공하는 것으로 충분하다고 가정합니다. 그가하려는 일을 할 수 있습니다 .xmlid를 갖는 것이 효과가있을 수도 있지만 서면으로 질문에서 어떻게 얻는 지 알 수 없습니다. 그가 보여주는 예제는 HTML 4 또는 HTML 5에서 작동하지 않으며 표시된 것을 달성하기 위해 작동하도록 할 방법이 없습니다.
— tvanfosson 2016 년
6
이 질문에 대한 답으로 나는이 대답을 upvoted : " 수 당신이 지정 요소에 여러 ID를?" 그러나 나는 이것이 단순한 사양을 넘어서는 것이라고 덧붙여 야한다. 허용 된 답변에 표시된 것처럼 HTML / XHTML 자체와 관련하여 사양은 속성을 사용하여 ID 만 할당 할 수 있다고 말합니다 id. 명확히하기 위해 xml:id속성 (및 실제로 기본 네임 스페이스 외부의 모든 속성)은 XHTML에서 유효하지 않습니다. 그러나 HTML5 사양을 인용 할 때 이로 인해 xml:id="bar"자동으로 실패하지는 않습니다. 여전히이 bar요소에 ID를 추가하여 일치시킬 수 있습니다 #bar.
— BoltClock
28

나의 이해는 항상 다음과 같습니다.

  • ID는 일회용 이며 하나의 요소에만 적용됩니다 ...

    • 각각은 하나의 단일 요소에 대한 고유 식별자로 간주됩니다 .

  • 수업은 두 번 이상 사용할 수 있습니다 ...

    • 그러므로 그것들은 하나 이상의 요소에 적용될 수 있으며, 유사하지만 다른 요소마다 하나 이상의 클래스 (즉, 여러 클래스) 가있을 수 있습니다 .
— 로스
소스
18
나는 이것이 질문에 대한 대답이 될 것이라고 생각하지 않습니다. 문제는 "단일 요소에 여러 ID를 사용할 수 있습니까?"입니다.
— 케빈
4
@kevin이 답변은 OP가 XY 문제에 직면했다고 가정하며 어떤 이유로 든 ID를 통해 클래스 동작을 달성하려는 사람에게 확실히 도움이 될 수 있습니다.
— Mahdi
"단일 사용"을 말하지만 혼동 될 수 있습니다. 당신은 frecuent하고 올바른 일이며 id로 하나의 요소를 여러 번 사용합니다. 내가 생각하는 것은 또 다른 해석입니다. 요소에 하나의 ID 만 사용하고 해당 요소에만 사용한다는 것입니다.
— Mbotet
27

아니요. HTML 4에 대한 w3c 의 정의가 귀하의 질문을 명시 적으로 다루지 않는 것 같지만 name 및 id 속성 의 정의 는 식별자에 공백이 없다고 말합니다.

ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 그 뒤에 여러 문자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_")이 올 수 있습니다. , 콜론 ( ":") 및 마침표 ( ".")

— 곡예사
소스
20

아니요. 모든 DOM 요소에는 ID가 있으면 하나의 고유 한 ID가 있습니다. 다음과 같은 것을 사용하여 근사 할 수 있습니다.

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

그런 다음 탐색을 사용하여 원하는 것을 얻을 수 있습니다.

스타일을 적용하려는 경우 클래스 이름이 더 좋습니다.

— 티 반포 손
소스
그래도 유효성 검사가 중단됩니다.
— Aupajo
3
이 답변에 대해 불법은 무엇입니까? 누군가 투표율을 설명 할 수 있습니까?
— tpower
19
내가 아니야 :-) 그리고 유효성 검사를 중단하는 것에 대해 무엇을 의미하는지 잘 모르겠습니다. div 및 span의 ID가 다르므로 (포함 및 포함) 중복 ID에는 문제가 없습니다. 어쩌면 어떤 사람들은 매우 자세히 읽지 않을 수도 있습니다.
— tvanfosson
4
은행 강탈은 불법이며 소프트웨어 문제는 결코 불법이 아닙니다. 그것은 다시 오래된 가상 현실 대 실제 현실 문제입니다
— :-P
@BrianFenton 다른 사람의 코드를 디버깅하면 불법이어야한다는 것을 알았습니다. 나는 정당한 이유없이 사양을 따르지 않기 때문에 5 년의 징역형을 선고합니다.
— ProblemsOfSumit
18

요소 당 하나의 ID 만 가질 수 있지만 실제로 둘 이상의 클래스를 가질 수 있습니다. 그러나 여러 클래스 속성이 없으면 여러 클래스 값을 하나의 속성에 넣습니다.

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

완벽하게 합법적입니다.

— 암브로스 채플
소스
4

단일 태그에 대해 여러 개의 ID를 가질 수는 없지만 일부 응용 프로그램에서 동일하게 취급되는 name속성과 id속성을 가진 태그를 보았습니다 .

— 힘
소스
1
IE에서는 IE8 이전에 그렇습니다. 하지만 그들은 표준 모드에서 그 버그를 고쳤습니다. getElementById ()는 이름과 ID에서 대소 문자를 구분하지 않고 elem을 잘못 리턴하는 데 사용됩니다.
— scunliffe
4

해당 경로를 따라 가려면 중첩 된 DIV를 사용해야합니다. 또한 가능하다면 document.getElementByID ()를 실행할 때 발생할 수있는 혼란을 상상해보십시오. ID가 여러 개인 경우 어떤 ID를 가져 옵니까?

약간 관련된 주제에서 DIV에 여러 클래스 를 추가 할 수 있습니다 . 에서 Eric Myers 토론을보십시오.

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

— 안 지산
소스
1
괄호 사이에 지정한 ID를 얻지 못합니까? getElementById();무엇을 얻을지 지정하는 문자열이 없으면 아무것도하지 않습니까?! getElementById('foo');ID가 foo 인 요소를 가져옵니다! 여러 ID는 여기서 중요하지 않습니다. 여전히 "foo"를 찾습니다.
— 린과 렌
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>
— 평화를위한 Samdom
소스
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"는 고유해야하며 공백을 포함 할 수 없습니다.

— 알렉산드르
소스
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>
— 제임스
소스
1

아니.

그렇게 말하면서, 당신이 그 일을 멈추게 할 것이 없습니다. 그러나 다양한 브라우저에서 일관되지 않은 동작이 발생합니다. 하지마 요소 당 1 개의 ID.

요소에 여러 개의 지정을하려면 클래스를 사용하십시오 (공백으로 구분).

— 눈 충돌
소스
0

그것은 흥미롭지 만, 내가 아는 한 대답은 확실합니다. 중첩 된 ID가 필요한 이유를 알 수 없습니다. 일반적으로 동일한 중첩 된 ID를 가진 다른 요소와 교차하기 때문에 중첩 된 ID가 필요합니다. 당신이 아무 소용이 없다면, 당신은 여전히 ​​아주 작은 점이 있습니다.

— 로버트 케이
소스
1
이전 버전과의 호환성을 위해 2 개의 ID를 사용하고 싶었습니다. 예를 들어 이전 버전에서는 기사 8 이었지만 지금은 하나의 요소로 2 id를 가진 node-8이라고 불리우며 이전 버전과 호환되도록 해결 방법을 코딩하지 못합니다. 두 ID 모두 고유 식별자로 유지됩니다.
— FLY
0

나는 이것이 1 살이라는 것을 알고 있지만 나는 이것에 대해 궁금했고 다른 사람들이 여기서 길을 찾을 것이라고 확신합니다. 다른 사람들이 내 앞에서 말한 것처럼 간단한 대답은 '아니요'입니다. 요소는 하나 이상의 ID를 가질 수 없으며 페이지에서 ID를 두 번 이상 사용할 수 없습니다. 사용해보십시오 . 작동 하지 않는 것을 볼 수 있습니다 .

두 개의 다른 요소에서 동일한 ID를 사용하는 것에 대한 tvanfosson의 답변에 대한 응답. 내가 아는 한 ID는 다른 태그에 연결되어 있는지 여부에 관계없이 페이지에서 한 번만 사용할 수 있습니다.

정의에 따르면 ID가 필요한 요소는 고유해야하지만 두 개의 ID가 필요한 경우 실제로 고유하지 않으며 대신 클래스가 필요합니다.

— 테일러
소스
1
그러나 tvanfosson의 답변을 읽으면 두 ID가 "enclosing_id_123"! = "enclosed_id_123"
— Ben
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를 두 번 사용하는 것은 다른 경우입니다. 그러나 한 사람이 여러 개의 여권을 가질 수 있습니다. 한 명의 직원이 여러 기능을 수행 할 수있는 상황이 있기 때문에 이것을 찾고있었습니다. id = "sysadm teamcoordinator"가있는 "sysadm"과 "team coordinator"라고하면 다른 페이지에서 이들을 참조 할 수있게해서 employee.html # sysadm과 employee.html # teamcoordinator가 같은 장소로 연결될 수 있습니다. 그렇지 않으면 sysadm이 sysadm으로 유지되는 동안 팀 코디네이터 기능을 대신 할 수 있습니다 ... 그런 다음 직원 .html 페이지에서 ID를 변경하면됩니다 ...하지만 내가 말한 것처럼 작동하지 않습니다 :(

— 올레 레이 다르 요한센
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.