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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.