Detailed analysis of JavaScript controls used to access HTML pages page 1/2

Source: Internet
Author: User

The following is the question:
The main object of the access control is the document object. Corresponds to all (sub-objects) personal views of the current document. Several methods are provided to access objects.
1. Document. getelementbyid
2. Document. getelementsbyname
3 Document. getelementsbytagname
4 Document. All
The following describes how to use the above methods:
I. First, let's talk about the usage of document. getelementbyid.
VaR OBJ = Document. getelementbyid ("ID") obtains the object based on the specified ID attribute value. Returns the reference of the first object with the ID attribute value equal to the ID. If the corresponding object is a group of objects, the first object in the group is returned.
<Input name = "A" type = "text" id = "B"/>
<Input name = "B" type = "text" id = "A"/>
<Input type = "button" name = "submint1" value = "text1" onclick =: "alert (document. getelementbyid ("B")/>) "<input type =" button "name =" submint2 "value =" text2 "onclick =" alert (document. getelementbyid ("A")/>) I tested the above in IE Code , Enter 1 in the first text box, enter 2 in the second text box, and then click the two buttons to eat a pound. Both buttons return the value of the first text box. This shows that when ie executes document. getelementbyid (elementname), the first object with name or ID equal to elementname is returned, which is not searched by ID.
On the contrary, this problem does not exist in Firefox. When you execute document. getelementbyid (elementname) in Firefox, you can only find the object whose ID is equal to elementname. If it does not exist, null is returned.
Ii. Let's take a look at the usage of document. getelementsbyname.
VaR OBJ = Document. getelementsbyname ("name") obtains an object set based on the value of the name attribute. Returns a set of objects whose name is equal to the specified name. Note that a set is returned, including only one element.
Document. getelementsbyname ("name") [0? 1? 2? 3?...] To obtain an element. Note that you can use [] or () to retrieve a value from a set in JavaScript (I tested it, but I didn't have any information to write it like this ).
For example:
<SCRIPT>
Function prop ()
{
VaR objs = Document. getelementsbyname ("");
Alert (objs (0). Value); // or alert (objs [0]. Value) is also correct.
}
</SCRIPT>
<Input type = "text" name = "A" id = "B" value = "this is textbox"/>
<Input type = "button" value = "testing" onclick = "prop ()"/>
Iii. Document. getelementsbytagname usage:
VaR ojbs = Document. getelementsbytagname ("tag") is based on the set of specified element name objects. The returned tag attribute is the set of the specified tag. Here, a set is returned. (Same as above)
Si.doc ument. All usage.
Document. All is a collection of all elements on the page. For example:
Document. All (0) indicates the first element of the page.
Document. All ("TXT") indicates a single element and a collection element of all objects whose ID or name is equal to TXT on the page.
If the ID or name on the page is equal to txt, there is only one element (including name and ID), then the result of document. All () is only one element, and vice versa, it is to get a set. (Combining the features of document. getelementbyid and document. getelementsbyname ).
You can also write document.all.txt in this way.
For example:
<Input name = aaa value = aaa>
<Input id = BBB value = BBB>
<Script language = JScript>
Alert (document. All. AAA. Value) // obtain value based on name
Alert (document. All. BBB. Value) // obtain value based on ID
</SCRIPT>
Code 2:
However, names can often be the same (for example, using checkbox to retrieve users' interests)
<Input name = aaa value = A1>
<Input name = aaa value = A2>
<Input id = BBB value = BBB>
<Script language = JScript>
Alert (document. All. AAA (0). Value) // display A1
Alert (document. All. AAA (1). Value) // display A2
Alert (document. All. BBB (0). Value) // This line of code will fail
</SCRIPT>
In theory, the IDs on a page are different from each other. If different tags have the same ID, document. all. ID, as shown in the following figure: <input id = aaa value = A1>
<Input id = aaa value = A2>
<Script language = JScript>
Alert (document. All. AAA. Value) // display undefined instead of A1 or A2
</SCRIPT>
In this case, use the following statement:
<Input id = aaa value = aaa1>
<Input id = aaa value = aaa2>
<Input name = BBB value = BBB>
<Input name = BBB value = bbb2>
<Input id = CCC value = CCC>
<Input name = DDD value = DDD>
<Script language = JScript>
Alert (document. All ("AAA", 0). value)
Alert (document. All ("AAA", 1). value)
Alert (document. All ("BBB", 0). value)
Alert (document. All ("BBB", 1). value)
Alert (document. All ("CCC", 0). value)
Alert (document. All ("DDD", 0). value)
</SCRIPT>
In addition, document. All can determine whether the browser type is IE,
Document. All --------- for IE
Document. Layers ------------ for Netscape
The two sets. All are valid only in IE, and layers is valid only in NC.
So we can use this method to determine different browsers.

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.