HTML 예제 코드_경험 교환에서 ID와 이름의 차이점에 대한 간략한 토론

IE 브라우저의

코드를 통해 미묘한 차이점을 분석할 수 있습니다. 이 텍스트 상자 개체를 색인화하는 데 메서드를 사용할 수 있나요? (구별을 위해 NAME과 ID를 다르게 설정했습니다.)
1. oDemo
2. decoform.oDemo
document.all.oDemo
4. .oDemo
5. document.forms[0].oDemo
6. document.forms['demoform'].oDemo
7. document.forms['demoform'].childNodes[0]
8. document.forms['demoform'].elements[0]
9. document.getElementById('oDemo2')

위의 9가지 인덱싱 방법은 모두 IE6에서 반환 값 테스트를 통과했습니다. , 마지막 항목에 주목할 가치가 있습니다. IE6에서는 인덱스 개체를

document.getElementById('oDemo')로 썼고 브라우저가 개체를 올바르게 인덱싱할 수 있습니다. 정말 끔찍한 내결함성입니다! !

그러면 문제가 발생합니다. 이 코드를 Mozilla Firefox 1.0에 넣고 다시 실행합니다. 그러나 7번째 메서드만 "정의되지 않음"을 반환하고 다른 메서드는 개체를 올바르게

인덱싱할 수 있습니다. , 세 번째 및 네 번째 방법은 IE 관련 개체 document.all을 사용하기 때문에 FF1.0이 올바른 값을 반환했지만 콘솔에 경고

가 표시되었습니다. 경고: 승인되지 않은 표준 속성 document.all. W3C 표준 형식 document.getElementById() 를 사용하세요.

다음으로 HTML 텍스트 유형을 더 엄격하게 정의하고 소스 코드의 시작 부분에 다음을 추가합니다.

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 텍스트가 다음에 따라 구문 분석됩니다. HTML4.01 표준에서는 IE6에서는 모든 반환 값 테스트가 여전히 통과되지만 Mozilla Firefox 1.0에서는 문제가 큽니다. 세 번째와 네 번째 메서드

에는 반환 값이 없지만 오류 메시지가 나타납니다. 콘솔에서 발행됨: 오류: document.all에는 속성이 없으며 7번째 메서드는 여전히 "정의되지 않은

"을 반환합니다.

요약

이름은 원래 식별을 위해 사용되었지만 이제는 사양에 따라 요소 식별을 위해 id를 사용하는 것이 좋습니다.

다음에는 이름만 사용할 수 있습니다.
1. 양식의 컨트롤 이름이며 제출된 데이터는 ID가 아닌 컨트롤 이름으로 제어됩니다.

체크박스, 라디오 등 동시에 여러 컨트롤에 해당하는 이름이 많고, ID는 전체 문서에서 고유해야 하기 때문입니다. 또한 브라우저는 이름을 기반으로 서버에 전송되는 요청을 설정합니다. 따라서 해당 ID를 사용하면 서버에서 데이터를 가져올 수 없습니다. ​
2. 프레임 및 창 이름은 다른 프레임이나 창에서 대상을 지정하는 데 사용됩니다.

다음에는 ID만 사용할 수 있습니다.
1. 라벨과 양식 컨트롤의 연결,

내 입력

for 속성은 라벨과의 연관을 지정합니다. 요소의 ID는 이름으로 대체될 수 없습니다.​ 2. CSS의 요소 선택 메커니즘은 #MyId를 사용하여 스타일을 적용해야 하는 요소를 지정하며 이름으로 대체할 수 없습니다.
3. 스크립트에서 객체 얻기:
IE는 스크립트에서 (이름 대신) ID로 식별된 객체를 직접 참조하는 것을 지원합니다. 예를 들어 위 입력의 경우 스크립트에서 입력 내용을 가져오려면

MyInput.value를 사용하여 직접 가져올 수 있습니다.
DOM을 사용하는 경우 document.getElementById("MyInput").value를 사용합니다. 이름을 사용하려면 일반적으로

document.forms[0과 같이 컨트롤이 포함된 양식을 먼저 가져옵니다. ], 그리고 양식에서 참조 이름을 입력합니다. 이렇게 얻은 값은 계산 후 서버로 전송되는 값입니다.

이름과 ID의 기타 차이점은 다음과 같습니다.
ID는 대소문자 구분 등 식별 요구 사항을 준수해야 하며 밑줄을 포함하지 않는 것이 가장 좋습니다(CSS와 호환되지 않기 때문). 기본적으로 이름에 대한 요구 사항은 없으며 숫자도 사용할 수 있습니다

.

CSS를 사용하여 이 링크의 체류 스타일을 제어하세요.
다음과 같이 작성할 수 있습니다. #m_blog div.opt a:hover{color:#D57813} 또는 #myLink:hover{color:#D57813}

NAME은 주로 대화형 웹 페이지에서 사용되며 양식은 서버 측 스크립트에 제출되고 가변적인 처리량을 받습니다. 소스 코드 표준화 및 호환성 측면에서 클라이언트

스크립트에서 객체를 인덱싱하려면 document.getElementById() 메서드를 사용하는 것이 좋습니다. NAME 값을 직접 사용하지 마십시오. 물론, 호환성을 고려하지 않는다면 위의 9가지 메소드

는 모두 IE에서 실행 가능합니다(IE5.0은 테스트되지 않았습니다).

첨부: 테스트 소스코드



nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">