Difference between document. forms [0] And getElementByName in JavaScript, getelementbyid

Difference between document. forms [0] And getElementByName in JavaScript, getelementbyid

First, let's look at an example:

Copy codeThe Code is as follows:
<Form name = "buyerForm" method = "post" action = "/mysport/control/user/list. do">
<Input type = "checkbox" id = "usernames" value = "testtest"> testtest <br>
<Input type = "checkbox" name = "usernames" value = "testtest"> testtest <br>
<Input type = "text" id = "usernames" value = "testtest"> testtest <br>
</Form>

When document. forms [0] has one or more form forms in the HTML page, a NodeList form array is returned.
Document. forms [0]. usernames. Here, usernames can be the value of id or name. Here, these two attributes are equivalent. In addition, it does not distinguish whether the component is a text box, a single button, or a check box.

In this case, we need to differentiate the two situations,

When the input id or name is 'usernames. forms [0]. usernames returns a specific input component. In this case, you must use 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 two or more input IDs or names are set to 'usernames', document. forms [0]. usernames returns the NodeList array,
Alert (document. forms [0]. usernames. length) returns the length of the array. In the preceding example, the returned value is 3.
Therefore, when using js for full selection, consider one or more check boxes with the same name.

Copy codeThe 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 whose names are usernames, the return value is the length of the array.
// When a check box name is usernames, form. usernames returns a check box object instead of an array, so its length attribute is undefined.
If (length) {// in javascript, as long as the condition to be judged is 0, null, or undefined, it is regarded as false. In other cases, it is considered true.
For (var I = 0; I <length; I ++ ){
Form. usernames [I]. checked = state;
}
}
Else {
Form. usernames. checked = state;
}
}

One component id is 'usernames' or multiple component IDs are 'usernames', document. the value returned by getElementById ('usernames') is a form component. When multiple component IDs are 'usernames', the first 'usernames' component is returned.
One component has 'usernames' or multiple components have 'usernames'. document. getElementsByName () returns an HTMLCollection array. Note the differences with document. getElementsByTagName (). The latter obtains an Array Based on the tag category.
Var names = document. getElementsByTagName ("usernames"), alert (names [0]) the returned result here is undefined. I used to mix byName and byTagName, but no tags started with usernames, <usernames value = ''> </usernames> This does not exist.
However, getElementsByTagName still returns an array set without any content. names [0] does not exist. Therefore, undefined is returned because the undefined value is displayed when the array range is exceeded.
Var test = {'0', '1', '2',}; alert (test [3]); The returned value is undefined.