JavaScript document.forms[0] and getelementbyname distinguish _javascript skills

Source: Internet
Author: User

First, let's look at an example:

Copy Code code 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>

Document.forms[0] When you have a form form or multiple form forms in an HTML page, you return a form array of nodelist types
Document.forms[0].usernames, here the usernames can be the value of the ID, or the value of name, where the two properties are equivalent. Also, it does not distinguish between a text box, a radio box, or a check box.

to distinguish between two situations ,

There is an input ID or name "usernames" when the document.forms[0].usernames return is the specific input components, then if the operation, you should follow the specific components of the operation method to use.

At this point, alert (document.forms[0].usernames.length) returns the undefined because the input component does not have the attribute length.
When the ID of two or two or more input is named ' usernames ', the Document.forms[0].usernames returns an array of NodeList, at which point the
Alert (document.forms[0].usernames.length) returns the length of the array, in the example above, the return value is 3
So, when using JS to select all, consider the same name check box with one or more cases

Copy Code code as follows:

function Allselect () {
var form = document.forms[0];
var state = form.allselectbox.checked;
var length = form.usernames.length;//Returns the length of an array when there are two or two more check boxes named usernames
When there is a checkbox named usernames, Form.usernames returns a check box object instead of an array, so its length property is undefined
if (length) {//in JavaScript, as long as the condition being judged is 0,null, or undefined, is considered false, other cases are considered true
for (Var i=0;i<length;i++) {
Form.usernames[i].checked=state;
}
}
else{
Form.usernames.checked=state;
}
}

The

has a component ID of ' usernames ' or more than one component ID of ' usernames ', and document.getElementById (' usernames ') returns a single form component. When more than one component ID is ' usernames ', returns the first ID of the ' usernames ' component. The
has a component name of ' usernames ' or multiple component name ' usernames ', and document.getelementsbyname () returns an array of htmlcollection. Notice the difference from the document.getElementsByTagName (), which gets the array based on the label category.
var names = document.getElementsByTagName ("usernames"), alert (names[0)) The result returned here is undefined, I used to confuse byname with Bytagname, and no label started with usernames, <usernames value= ' ></usernames> it doesn't exist.
But getElementsByTagName returns an array collection that contains nothing, names[0] does not exist, so it returns undefined, because when the array is out of range, the values that pop up are undefined.
var test = {' 0 ', ' 1 ', ' 2 ',};alert (test[3]); The return 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.