HTML ID 독창성 : 이해와 실습

HTML의 ID 속성은 고유해야하며 이는 W3C 사양의 핵심 요구 사항입니다. ID를 재사용하면 브라우저가 첫 번째 일치 만 인식하기 때문에 JavaScript, CSS Selector 및 URL Fragment 식별자가 무효화 될 수 있습니다. 이 문제에 대한 해결책은 고유성을 보장하기 위해 ID를 접두사하거나 동일한 특성을 가진 요소를 표시하기 위해 클래스 속성을 사용하는 것을 고려하는 것입니다.

HTML ID 속성의 독창성 원리

HTML 문서에서 ID 속성은 요소의 고유 식별자 로 설계되었습니다. 즉, 두 요소가 HTML 문서 트리 전체에 동일한 ID 값을 가질 수 없습니다. 이는 HTML 사양의 기본적이고 필수 규칙으로 모든 요소가 정확하게 배치되고 조작 될 수 있도록 설계되었습니다.

예를 들어, 텍스트 게임 스토어 인터페이스를 개발할 때 다른 직업 (예 : Archer/Warrior 및 Mage)의 항목 목록에 동일한 SPAN ID (예 : Boxers.Value)를 사용하는 경우 문제가 발생합니다. JavaScript가 이러한 ID에 해당하는 제품 가격 또는 수량을 업데이트하려고하면 문서에서 첫 번째 일치 요소 만 찾아서 동일한 ID를 가진 후속 요소를 무시합니다. 예제 코드에서 "Warrior_archer's_other"섹션의 제품 정보를 정상적으로 표시 할 수있는 반면 "Mage's_other"섹션의 데이터는 올바르게 푸시 할 수 없습니다.

HTML 사양에 대한 명확한 요구 사항

HTML Living 표준 사양에 따르면 ID 속성에 관한 다음 조항이 있습니다.

HTML 요소에 지정된 경우 ID 속성 값은 요소 트리의 모든 ID 중에서 고유해야하며 하나 이상의 문자를 포함해야합니다. 이 값에는 ASCII 공백 문자가 포함될 수 없습니다. ID 속성은 해당 요소의 고유 식별자 (ID)를 지정합니다. 신분증이 어떤 형태로 취할 수 있는지에 대한 다른 제한은 없습니다 . 특히, ID는 숫자로 시작하는 숫자로만 구성 될 수 있으며, 밑줄로 시작하고 구두점 마크 등으로 구성됩니다. 요소의 고유 식별자는 다양한 목적으로 사용될 수 있으며, 특히 스크립팅시 요소를 찾는 방법으로 조각을 사용하여 문서의 특정 부분에 링크를 사용하는 방법으로, 특히 CS의 특정 요소를 스타일링하는 방법으로 사용될 수 있습니다.

이 사양은 ID의 독창성 이 핵심 기능이며 그 기능의 기초임을 분명히 나타냅니다.

중복 ID의 피해와 영향

ID 고유성의 원칙을 위반하면 일련의 문제가 발생하여 웹 페이지의 기능과 유지 관리에 영향을 미칩니다.

1. JavaScript 동작 예외 : document.getElementByid () 메소드는 JavaScript에서 ID를 통해 요소를 얻는 표준 방법입니다. 중복 ID가 있으면이 메소드는 해당 ID와 일치하는 문서의 첫 번째 요소 만 리턴합니다. 즉, 페이지에 동일한 ID가있는 여러 요소가 있더라도 JavaScript는 그 중 하나에만 액세스하고 작동 할 수 있으므로 동일한 ID를 가진 다른 요소가 제대로 제어 될 수 없으므로 논리적 오류가 발생합니다.

2. CSS 선택기 문제 : 일부 브라우저는 중복 ID가있는 CSS 스타일을 처리 할 때 모든 일치하는 요소에 스타일을 적용 할 수 있지만 표준 동작이 아니며 스타일 우선 순위 및 특이성 계산의 혼란을 유발할 수 있습니다. #ID 선택기는 고유 한 요소를 가리키기 때문에 가장 높은 특이성을 갖도록 설계되었습니다. ID가 고유하지 않으면 CSS의 동작은 예측할 수 없게됩니다.

3. URL Fragment Identifier Invalid : URL의 조각 식별자 (예 : http://example.com/page.html#section-id)는 페이지에 지정된 ID가있는 요소로 브라우저를 스크롤하는 데 사용됩니다. 중복 ID가있는 경우 브라우저는 첫 번째 일치 요소로만 스크롤되며 사용자가 기대하는 특정 부분을 정확하게 탐색 할 수 없습니다.

솔루션 및 모범 사례

ID 복제 문제를 해결하는 핵심은 각 ID가 고유한지 확인하는 것입니다. 몇 가지 권장 방법은 다음과 같습니다.

1. ID에 고유 한 접두사를 추가하십시오

가장 직접적이고 효율적인 솔루션은 컨텍스트를 구별하는 각 ID에 대해 고유 한 접두사를 추가하는 것입니다. 예제 저장 시나리오에서 ID는 직업 또는 컨테이너에 따라 이름을 지정할 수 있습니다.

수정 코드 스 니펫 전에 (중복 ID가 있음) :

 <div class="shop_otherstuff" id="Warrior_archer's_other" style="display : none;">
    <div id="view1">
        <p> 의류 :  <br>
        </p>
<p> 9.) 권투 선수 : 가격 : $ <span id="boxers.value"> 0 </span> & emsp; 남은 금액 : <span id="boxers.amountof"> 0 </span> </p>
        
    </div>
</div>
<div class="shop_otherstuff1" id="mage's_other" style="display : none;">
    <div id="view1">
        <p> 의류 :  <br>
        </p>
<p> 10.) 권투 선수 : 가격 : $ <span id="boxers.value"> 0 </span> & emsp; 남은 금액 : <span id="boxers.amountof"> 0 </span> </p>
        
    </div>
</div>

수정 된 샘플 코드 (ID 고유성을 보장하기 위해 접두사 추가) :

 <div class="Otherstuff_container" id="o_shop" style="display : none;">
    <div id="Otherstuff_banner">
        <p> 다른 물건 </p>
    </div>
    <div class="shop_otherstuff" id="Warrior_archer's_other" style="display : none;">
        <div id="warriorarcherview1"> 
            <p> 의류 :  <br>
            </p>
<p> 9.) 권투 선수 : 가격 : $ <span id="Warriorarcher_boxers.value"> 0 </span> & emsp; 남은 금액 : <span id="warriorarcher_boxers.amountof"> 0 </span> </p>
            <p> 10.) 실크 팬티 : 가격 : $ <span id="Warriorarcher_silkpanties.value"> 0 </span> & emsp; 남은 금액 : <span id="warriorarcher_silkpanties.amountof"> 0 </span> </p>
            <p> 11.) 실크 브래지어 : 가격 : $ <span id="Warriorarcher_silkbra.value"> 0 </span> & emsp; 남은 금액 : <span id="warriorarcher_silkbra.amountof"> 0 </span> </p>
            <p> 12.) G- 스트링 : 가격 : $ <span id="Warriorarcher_gstring.value"> 0 </span> & emsp; 남은 금액 : <span id="Warriorarcher_gstring.amountof"> 0 </span> </p>
            <p> 13.) PUSHUP BRA : 가격 : $ <span id="Warriorarcher_pushupbra.value"> 0 </span> & emsp; 남은 금액 : <span id="warriorarcher_pushupbra.amountof"> 0 </span> </p>
            <p> 14.) 허벅지 최고 : 가격 : $ <span id="Warriorarcher_thighhighs.value"> 0 </span> & emsp; 남은 금액 : <span id="Warriorarcher_thighhighs.amountof"> 0 </span> </p>
        </div>
        <div id="warriorarcherview2"> 
            <p> 물약 :  <br>
            </p>
<p> 15.) 건강 물약 : 가격 : $ <span id="Warriorarcher_minorhealthpotion.value"> 0 </span> & emsp; 남은 금액 : <span id="warriorarcher_minorhealthpotion.amountof"> 0 </span> </p>
            <p> 16.) Stamina Potion : 가격 : $ <span id="Warriorarcher_minorstaminapotion.value"> 0 </span> & emsp; 남은 금액 : <span id="warriorarcher_minorstaminapotion.amountof"> 0 </span> </p>
            <p> 17.) MANA POTION : 가격 : $ <span id="Warriorarcher_MinormanApotion.Value"> 0 </span> & emsp; 남은 금액 : <span id="warriorarcher_minormanapotion.amountof"> 0 </span> </p>
        </div>
    </div>
    <div class="shop_otherstuff1" id="mage's_other" style="display : none;">
        <div id="mageview1"> 
            <p> 의류 :  <br>
            </p>
<p> 10.) 권투 선수 : 가격 : $ <span id="mage_boxers.value"> 0 </span> & emsp; 남은 금액 : <span id="mage_boxers.amountof"> 0 </span> </p>
            <p> 11.) 실크 팬티 : 가격 : $ <span id="mage_silkpanties.value"> 0 </span> & emsp; 남은 금액 : <span id="mage_silkpanties.amountof"> 0 </span> </p>
            <p> 12.) 실크 브래지어 : 가격 : $ <span id="mage_silkbra.value"> 0 </span> & emsp; 남은 금액 : <span id="mage_silkbra.amountof"> 0 </span> </p>
            <p> 13.) g- 스트링 : 가격 : $ <span id="mage_gstring.value"> 0 </span> & emsp; 남은 금액 : <span id="mage_gstring.amountof"> 0 </span> </p>
            <p> 14.) PUSHUP BRA : 가격 : $ <span id="mage_pushupbra.value"> 0 </span> & emsp; 남은 금액 : <span id="mage_pushupbra.amountof"> 0 </span> </p>
            <p> 15.) 허벅지 최고 : 가격 : $ <span id="mage_thighhighs.value"> 0 </span> & emsp; 남은 금액 : <span id="mage_thighhighs.amountof"> 0 </span> </p>
        </div>
        <div id="mageview2"> 
            <p> 물약 :  <br>
            </p>
<p> 16.) 건강 물약 : 가격 : $ <span id="mage_minorhealthpotion.value"> 0 </span> & emsp; 남은 금액 : <span id="mage_minorhealthpotion.amountof"> 0 </span> </p>
            <p> 17.) Stamina Potion : 가격 : $ <span id="mage_minorstaminapotion.value"> 0 </span> & emsp; 남은 금액 : <span id="mage_minorstaminapotion.amountof"> 0 </span> </p>
            <p> 18.) 마나 포티온 : 가격 : $ <span id="mage_minormanapotion.value"> 0 </span> & emsp; 남은 금액 : <span id="mage_minormanapotion.amountof"> 0 </span> </p>
        </div>
    </div>
</div>

위의 수정 된 코드에서는 ID를 Warriorarcher_boxers.Value 및 Map_boxers.Value 등으로 변경하고 Warriorarcher_ 및 MAP_ 접두사를 추가하여 이러한 SPAN 요소의 ID가 문서 전체에서 고유한지 확인합니다. 동시에, 내부 div 요소 (예 : View1)의 ID를 예를 들어 Warriorarcherview1 및 MapView1과 같은 고유성을 보장하기 위해 수정해야합니다.

2. 클래스 속성을 합리적으로 사용하십시오

여러 요소가 동일한 스타일이나 동작을 공유해야하지만 JavaScript에 의해 ID에 의해 개별적으로 정확하고 정확하게 배치 될 필요가 없다면 클래스 속성이 더 적합한 선택입니다. 클래스 속성은 여러 요소로 공유 할 수 있으며 모든 일치하는 요소는 document.getElementsByClassName () 또는 document.querySelectorall () 메소드를 통해 얻을 수 있습니다.

예를 들어, 모든 품목의 가격 표시 영역에 동일한 스타일이 필요한 경우 항목 가격 클래스를 추가 할 수 있습니다.

 <p> 9.) 권투 선수 : 가격 : $ <span class="item-price" id="warriorarcher_boxers.value"> 0 </span> & emsp; 남은 금액 : <span class="item-amount" id="Warriorarcher_boxers.amountof"> 0 </span> </p>

그런 다음 CSS를 통해 작동합니다 .item-price {color : green; } 또는 javaScript document.querySelectorall ( '. 항목-가격').

3. 데이터 속성을 사용하여 데이터를 저장하십시오

요소와 관련된 사용자 정의 데이터가 필요한 상황의 경우 HTML5 도입 데이터-* 속성은 ID 남용보다는 더 의미적이고 정규화 된 옵션입니다.

 <span id="warriorarcher_boxers.value" data-item-name="boxers" data-item-type="의류"> 0 </span>

이런 식으로 JavaScript는 ID의 독창성에 영향을 미치지 않고 Element.dataset.itemname을 통해이 데이터에 액세스 할 수 있습니다.

요약 및 제안

HTML 문서에서 ID 속성의 독창성을 보장하는 것은 표준화되고 강력하며 유지 관리가 쉬운 프론트 엔드 코드를 작성하는 데 핵심입니다. 특정 요소를 올바르게 작동 할 수없는 JavaScript를 만나면 먼저 중복 ID의 문제가 있는지 확인하십시오. ID에 의미있는 접두사를 추가하고 클래스 속성을 합리적으로 사용하고 필요할 때 데이터-* 속성을 사용하면 ID 복제로 인한 다양한 문제를 효과적으로 피하고 개발 효율성과 사용자 경험을 향상시킬 수 있습니다. 항상 HTML 사양을 따르는 것은 고품질 웹 애플리케이션을 구축하기위한 기초입니다.

위 내용은 HTML ID 독창성 : 이해와 실습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!