HTML요소_HTML/Xhtml_웹페이지 제작의 ID, Name 속성의 차이점

오늘은 에 대해 약간 혼란스럽습니다. #을 추가하면 앵커를 의미하고 그 뒤에 13이 오면 이 페이지의 13 위치로 이동하며 이 13은 이름 속성 값입니다.
ID 값이 아닌 이유는 무엇입니까? ? ? 그래서 ID와 이름의 차이점을 확인하고

가장 고전적인 답변을 기록했습니다. ID는 사람의 ID 번호와 같고 이름은 이름과 같습니다. ID는 분명히 고유하며 이름은 반복될 수 있습니다.
분명히 ID와 이름에 대한 답변은 너무 일반적입니다. 물론 클라이언트 측 HTML 요소의 ID인 ID에 대한 설명은 완전히 정확합니다. Name은 실제로 훨씬 더 복잡합니다. Name은 용도가 다양하고 ID로 완전히 대체할 수 없으므로 취소됩니다. 구체적인 용도는 다음과 같습니다.
사용 1: 입력, 선택, 텍스트 영역 및 버튼과 같이 서버와 상호 작용할 수 있는 HTML 요소의 서버 측 표시기로 사용됩니다. 서버 측 이름을 기반으로 Request.Params를 통해 요소가 제출한 값을 얻을 수 있습니다.
사용 2: HTML 요소 입력 유형='라디오' 그룹화, 라디오 버튼 컨트롤이 동일한 그룹화 클래스에 있고 확인 작업이 뮤텍스이며 동시에 하나의 라디오만 선택할 수 있다는 것을 알고 있습니다. 이 그룹화는 동일한 Name 속성을 기반으로 구현되었습니다.
사용 3: 페이지에 앵커 포인트를 설정합니다. 링크 대신 < ;a name="PageBottom">과 같이 페이지 앵커를 얻습니다.
사용 4: Applet, Object, Embed 및 기타 요소와 같은 객체로서의 ID입니다. 예를 들어 Applet 객체 인스턴스에서는 이름을 사용하여 객체를 참조합니다.
목적 5: IMG 요소와 MAP 요소를 연관시킬 때 IMG의 핫스팟 영역을 정의하려면 해당 속성인 usemap을 사용해야 하므로 usemap="#name"(연관된 MAP의 이름
요소).
사용 6: 속성, 메타, 매개변수 등 특정 특정 요소의 속성. 예를 들어, 객체에 대해
분명히 이러한 용도는 단순히 ID로 대체할 수 없으므로 HTML 요소의 ID와 이름의 차이는 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에서는 index 객체를 document.getElementById('oDemo')로 작성했으며 브라우저는 해당 객체를 올바르게 인덱싱할 수 있습니다. 정말 끔찍한 내결함성입니다! !
그러면 문제가 발생합니다. 이 코드를 Mozilla Firefox 1.0에 넣고 다시 실행합니다. 7번째 메서드만 "정의되지 않음"을 반환합니다. 그러나 다른 메서드는 3번째와 4번째 메서드로 인해 개체를 올바르게 인덱싱할 수 있습니다. - 특정 개체 document.all이 사용됩니다. FF1.0이 올바른 값을 반환하더라도 콘솔에 경고: 경고: 비표준 속성 document.all이 표시됩니다. W3C 표준 양식 document.getElementById()
를 사용하세요.
다음으로 HTML 텍스트 유형을 더 엄격하게 정의하고 소스 코드 시작 부분에 다음을 추가합니다. 는 HTML 텍스트가 HTML4.01 표준에 따라 구문 분석되도록 합니다. IE6에서는 여전히 반환 값 테스트를 통과합니다. 그러나 Mozilla Firefox 1.0에서는 문제가 있습니다. big.3 및 4 첫 번째 메서드에는 반환 값이 없지만 콘솔에 오류 메시지가 표시됩니다. 오류: document.all에는 속성이 없으며 일곱 번째 메서드는 여전히 "정의되지 않음"을 반환합니다.
요약
NAME은 주로 대화형 웹 페이지에서 사용되며 양식이 서버측 스크립트에 제출된 후 가변적인 처리량을 받습니다. 소스 코드 표준화 및 호환성 측면에서 클라이언트 스크립트에서 객체를 인덱싱하려면
document.getElementById()
또 다른 간단한 예:

사용자 이름:
비밀번호: ;

JS가 이름을 사용하여 얻으려면 document.form1.username.value로 작성해야 합니다.
document.form1 .password.value ;
다음을 얻으려면 id를 사용하세요.
docuement.getElementById("username");
docuement.getElementById("pwd")
때때로 이름이 같을 수 있습니다. 이번에는 이름을 얻으면 어떤 값을 얻었는지 판단하는 것이 불가능합니다.
document.getElemntsByName("username");
여기서 얻는 것은 배열입니다.