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 Code in IE, input 1 in the first text box, enter 2 in the second text, and then click two buttons, 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.
Finally, let me talk about the use range of getelementbyid and getelementsbyname:
IDs are unique like ID card numbers. names can be the same as names.
An element defines an ID. When referencing this element, the ID attribute is directly used. Name is usually used in form and must be specified by document. form. * **, that is, the element defined by the name attribute is a sub-object of the Document Object in the script.
1. Name is used for the elements in form and is required for submission.
ID is used for elements outside form, because Dom can directly obtain a single element.
2. ID, each page can have only one
Name can have multiple names. Some labels are not recommended.
3. form input textarea select and IFRAME frame use names are related to the form (the frame element acts on the target of the form) submission, only the element with name is received on the receiving page of the form, and the element with ID is not received through the form. You can verify that there is an exception. A can assign name as the anchor, you can also assign ID. Only the elements with ID and name can be assigned. Only the elements related to the form can be assigned ID) body Li table tr TD th P Div Span Pre dl dt dd font B and so on.
Here I am going to ask another question. Since I have an ID, why do I need a name?
The most direct answer: ID is like a person's ID card number, and name is like his name. Although ID is unique, name can be repeated.
Specifically, for an ID, It is the identity of the HTML element on the client side. Name is actually much more complex, because name has many purposes, so it cannot be completely replaced by ID, so it is canceled.
Reference website materials are as follows:
Purpose 1: ID of the server as an HTML element that can interact with the server, such as input, select, textarea, And button. On the server side, we can use request. Params to obtain the value submitted by the element based on its name. Purpose 2: HTML element input type = "radio" group. We know that the radio button control is in the same group class. The check operation is mutex and only one radio can be selected at a time, this group is implemented based on the same name attribute.
Purpose 3: Create an anchor in the page. We know that <a href = "url"> link </a> is used to obtain a page hyperlink. If you do not use the href attribute, use name instead, for example, <a name = "pagebottom"> </a>.
Purpose 4: act as the identity of an object, such as applet, object, and embed. For example, in the applet object instance, we will use its name to reference this object.
Purpose 5: When the IMG and map elements are associated, if you want to define the IMG hotspot area, you need to use its attribute usemap, make usemap = "# name" (name of the associated map element)
Purpose 6: Attributes of certain elements, such as attribute and Param. For example, define the parameter <Param name = "appletparameter" value = "value"> for the object.
Obviously, these functions are not simply replaced by IDS, so the ID and name of the HTML element are not the same as the ID card number and name, they are actually different things. Of course, the name attribute of the HTML element can also play a role of ID in the page, because in the DHTML Object Tree, we can use document. getelementsbyname is used to obtain an array of objects containing all the specified name elements on the page.
By the way, what if the IDs of n (n> 1) HTML elements on the page are the same? How can we reference them in DHTML objects? If we use the ASPX page, this situation is not easy, because the ASPNET process does not allow non-unique IDs when processing the ASPX page, this is because the page will be thrown an exception and cannot be a normal render. If we want to repeat the ID on a dynamic page, how does ie do it?
At this time, we can continue to use document. getelementbyid to get the object, except that we can only get the first object that appears in the HTML render of the objects with duplicate IDs. At this time, duplicate IDs are automatically converted into an array when being referenced. Elements with duplicate IDs exist in the array in order of render.
Getelementbyid ("XXX") returns the first element whose ID attribute is "XXX" or whose specific form element name is "XXX ".
Getelementsbyname ("XXX") returns all the elements whose ID attribute is "XXX" or whose specific form element name is "XXX ".
The difference between getelementbyid and getelementsbyname is that the former returns only the first element and the latter returns the set of all elements.
In addition, the form Element form element refers to the tag that data can be submitted to the server in the <form> tag.
There are <input> <SELECT> <textarea> three tags. The three tags can submit data to the server only when the name attribute is not empty. in fact, the name attribute and the ID attribute are identical and can be used to locate elements.
If it is not a form element, even if you add the name attribute getelementsbyname, you cannot try it yourself.
