JavaScript_javascript 기술의 document.forms[0]과 getElementByName의 차이점

먼저 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

testtest

testtest

testtest

document.forms[0] HTML 페이지에 하나의 폼 폼이 있거나 여러 폼이 있는 경우 NodeList 형태의 폼 배열을 반환합니다.
document.forms[0].usernames(여기서 사용자 이름은 id 값 또는 name 값일 수 있음) 여기서는 이 두 속성이 동일합니다. 또한 해당 구성 요소가 텍스트 상자인지, 라디오 버튼인지, 확인란인지 구분하지 않습니다.

이때 두 가지 상황을 구분해야 합니다,

ID 또는 이름이 'usernames'인 입력이 있는 경우 document.forms[0].usernames는 특정 입력 컴포넌트를 반환합니다. 이때 이를 조작할 경우 해당 컴포넌트 조작 방법에 따라 사용해야 합니다. .

이때, 입력 컴포넌트에 길이 속성이 없기 때문에 Alert(document.forms[0].usernames.length)는 정의되지 않은 값을 반환합니다.
id나 이름이 'usernames'인 입력이 2개 이상일 경우 document.forms[0].usernames는 NodeList 배열을 반환합니다. 이때
Alert(document.forms[0].usernames.length)는 배열의 길이를 반환합니다. 위 예에서 반환 값은 3
입니다. 따라서 js를 사용하여 전체 선택을 할 때에는 같은 이름의 체크박스가 하나 이상 있는지를 고려해야 합니다

코드 복사 코드는 다음과 같습니다.

함수 allSelect(){
var form = document.forms[0];
var 상태 = form.allselectbox.checked;
var length = form.usernames.length;//username이라는 체크박스가 2개 이상 있을 경우 배열의 길이를 반환합니다.
//usernames라는 체크박스가 있는 경우 form.usernames는 배열 대신 체크박스 객체를 반환하므로 해당 길이 속성은 정의되지 않습니다.
if(length){ //자바스크립트에서는 판단되는 조건이 0, null, undef인 경우 false로 간주하고 그 외의 상황은 true로 간주합니다
for(var i=0;i form.usernames[i].checked=state;
}
}
그렇지 않으면{
form.usernames.checked=state;
}
}

ID가 'usernames'인 구성 요소가 하나 있거나 ID가 'usernames'인 구성 요소 ID가 여러 개 있는 경우 document.getElementById('usernames')가 반환하는 값은 다음과 같은 구성 요소가 여러 개 있는 경우입니다. 'usernames'의 ID, return은 'usernames' ID를 가진 첫 번째 구성 요소입니다.
이름이 'usernames'인 구성 요소가 있거나 이름이 'usernames'인 구성 요소가 여러 개 있는 경우 document.getElementsByName()은 HTMLCollection 배열을 반환합니다. 태그 카테고리를 기반으로 배열을 가져오는 document.getElementsByTagName()과의 차이점에 유의하세요.
var names = document.getElementsByTagName("usernames"), Alert(names[0]) 여기에 반환된 결과는 정의되지 않았습니다. 원래 byName과 byTagName을 혼동했으며 사용자 이름, <로 시작하는 태그가 없습니다. ;/사용자 이름>존재하지 않습니다.
그러나 getElementsByTagName은 여전히 ​​콘텐츠가 포함되지 않은 배열 컬렉션을 반환합니다. names[0]이 존재하지 않으므로 배열 범위를 초과하면 정의되지 않은 모든 값이 팝업되기 때문에 undefound가 반환됩니다.
var test = {'0','1','2',};alert(test[3])는 정의되지 않은 값을 반환합니다.