HTML에서 중복 ID를 사용하면 어떻게 되나요?

동일한 ID를 가진 여러 요소: 무효화로의 여정

한 페이지의 두 요소가 동일한 ID를 공유해서는 안 된다는 W3C의 명확한 지침에도 불구하고, 이는 당혹스러운 현상입니다. 여러 요소가 동일한 ID를 가질 때 발생합니다. 이 예외 현상이 의미하는 바를 조사해 보겠습니다.

브라우저 동작

브라우저에서는 기대에 맞게 유효하지 않은 HTML을 해석하는 "자동 실패" 접근 방식을 채택하는 경우가 많습니다. 따라서 유효하지 않지만 동일한 ID를 가진 두 요소가 있는 HTML 예제는 모든 브라우저에서 작동합니다.

잠재적인 부작용

그러나 사양을 벗어나면 다음과 같은 문제가 발생할 수 있습니다. 예상치 못한 결과. 예를 들어, getElementById() 메소드를 사용하면 지정된 ID를 가진 첫 번째 요소만 검색합니다.

더 안전한 대안

동일한 ID를 가진 여러 요소를 사용하는 대신 클래스 이름을 사용하여 스타일을 지정하세요. 요소 그룹. 이 방법은 CSS 선택기의 의도된 디자인을 따릅니다.

동일한 ID를 가진 요소 쿼리

동일한 ID를 가진 여러 요소를 반드시 선택해야 하는 경우 속성 선택기를 사용할 수 있습니다.

document.querySelectorAll('p[id="red"]');

이 접근 방식은 IE7과 같은 이전 브라우저 버전에서는 작동하지 않을 수 있습니다.

결론

브라우저가 잘못된 HTML을 수용할 수 있지만 그러한 동작에 의존하지 않는 것이 좋습니다. 일관성, 유지 관리 용이성 및 잠재적인 문제 방지를 위해 유사한 요소의 스타일을 지정하는 데 클래스 이름을 사용하십시오.

위 내용은 HTML에서 중복 ID를 사용하면 어떻게 되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!