The difference between document.forms[0] and getElementByName in JavaScript_javascript skills

First let’s look at an example:

Copy code The code is as follows:

testtest

testtest

testtest

document.forms[0] When there is a form form or multiple form forms in the HTML page, a form array of NodeList type is returned
document.forms[0].usernames, where usernames can be the value of id or the value of name, these two attributes are equivalent here. Moreover, it does not distinguish whether the component is a text box, a radio button, or a check box.

At this time two situations need to be distinguished ,

When there is an input whose id or name is 'usernames', document.forms[0].usernames returns the specific input component. If you operate it at this time, you must use it according to the specific component operation method.

At this time, alert(document.forms[0].usernames.length) returns undefined because the input component does not have the length attribute.
When there are two or more inputs whose ids or names are 'usernames', document.forms[0].usernames returns a NodeList array. At this time,
alert(document.forms[0].usernames.length) will return the length of the array. In the above example, the return value is 3
Therefore, when using js to select all, you must consider whether there are one or more checkboxes with the same name

Copy code The code is as follows:

function allSelect(){
var form = document.forms[0];
var state = form.allselectbox.checked;
var length = form.usernames.length;//When there are two or more check boxes named usernames, the length of the array is returned
//When there is a checkbox named usernames, form.usernames returns the checkbox object instead of an array, so its length attribute is undefined
if(length){ //In JavaScript, as long as the condition being judged is 0, null, or undefined, it is considered false, and other situations are considered true
for(var i=0;i form.usernames[i].checked=state;
}
}
else{
form.usernames.checked=state;
}
}

If there is one component with the ID of 'usernames' or multiple component IDs with the ID of 'usernames', the value returned by document.getElementById('usernames') is a form component. When there are multiple components with the ID of 'usernames', return is the first component with id 'usernames'.
If there is a component with the name 'usernames' or multiple components with the name 'usernames', document.getElementsByName() returns an HTMLCollection array. Note the difference with document.getElementsByTagName(), which obtains an array based on the tag category.
var names = document.getElementsByTagName("usernames"), alert(names[0]) The result returned here is undefined. I originally confused byName with byTagName, and no tag starts with usernames, This does not exist.
However, getElementsByTagName still returns an array collection, which does not contain any content. names[0] does not exist, so undefined is returned, because when it exceeds the range of the array, all undefined values ​​pop up.
var test = {'0','1','2',};alert(test[3]); returns undefined.