Home > Article > Web Front-end > Detailed analysis of the method of Javascript accessing the controls of the html page_javascript skills
Detailed analysis of the method of Javascript accessing the controls of the html page_javascript skills
- PHP中文网Original
- 2016-05-16 19:01:47935browse
During this period of free time in the company, I decided to study JavaScript access to HTML controls. This is very common. Here I systematically researched JavaScript access methods. I passed the test and have the following research achievements for everyone to share and supplement. .
Let’s get to the point:
The main object of access control is: document object. Corresponds to all (sub-objects) personal views of the current document. And several main methods have been provided to access the object. " 🎜> 1 ． First let me talk about the usage of document.getElementById.
Var obj=document.getElementById("ID") Gets the object based on the specified ID attribute value. Returns a reference to the first object whose id attribute value is equal to ID. If the corresponding object is a group of objects, the first object in the group is returned.
)”)" I tested the above code in IE, enter 1 in the first text box, and enter 1 in the second text box. 2. Then click two buttons to eat a pound. As a result, both buttons return the value of the first text box. This shows that when IE executes document.getElementById(elementName), it returns the first object whose name or id is equal to elementName, and does not search based on the ID.
But on the contrary, I don’t have this problem in firefox. When Firefox executes document.getElementById(elementName), it can only find the object whose ID is equal to elementName. If it does not exist, it will return null.
2. Let's take a look at the usage of document.getElementsByName.
Var obj=document.getElementsByName("Name") gets the object collection based on the value of the Name attribute. Returns a collection of objects whose name is equal to the specified Name. Note that what is returned here is a set, including the case where there is only one element.
document.getElementsByName("name")[0?1?2?3?....] This is how to get a certain element. Note that you can use [] or () to get a value from a set in JavaScript (I passed the test, but there is no information to write it this way).
For example:
<script> <br>function prop() <br>{ <br>var objs=document.getElementsByName("a"); <br>alert(objs(0).value) ;//Or you can alert(objs[0].value) which is also correct. <br>} <br></script>
3. Usage of Document.getElementsByTagName:
Var ojbs=document.getElementsByTagName("Tag") based on a collection of objects based on the specified element name. Returns a collection whose Tag property is equal to the specified Tag tag. Also returned here is a collection. (Same as above)
4. document.all usage.
document.all is a collection of all elements in the page. For example:
document.all(0) represents the first element of the page.
Document.all("txt") represents single elements and collection elements of all objects on the page whose id or name is equal to txt.
If the id or name on the page is equal to txt and has only one element (including name and id), then the result of document.all() is only one element, otherwise it is a collection. (Integrating the respective characteristics of document.getElementById and document.getElementsByName).
You can also write it like this: document.all.txt is the same.
For example:
Code 2:
But often name can Same (such as: using checkbox to retrieve multiple hobbies of the user)
Theoretically, the IDs in a page are different from each other. If different tags appear with the same id, document.all.id will fail, like this:
In addition, document.all can determine whether the browser type is IE,
document.all---- -----For IE
document.layers------------For Netscape
These two collections .all are only valid in ie, layers are only valid in nc
So you can judge different browsers in this way.
Finally, let me talk about the usage scope of getElementById and getElementsByName:
Id is like an ID number, it is unique, and name can be the same as a name.
An element defines an id. When referencing the element, use the id attribute directly. The name is usually used in form and must come from document.form.***. In other words, the element defined by the name attribute is in the script. is a sub-object of the document object.
1. name is used for elements inside the form, which is required for submission.
id is easy to use for elements outside the form because DOM can directly obtain a single element
2. There can only be one id per page
name is OK There are multiple names and some tags are not recommended to use it
3. Form elements (form input textarea select) and frame elements (iframe frame) use name. These elements are related to the form (frame element acts on the target of the form) submission. In The receiving page of the form only accepts elements with name. Elements assigned ID cannot receive values through the form. You can verify it yourself. There is an exception. A can assign name as an anchor point, or it can assign ID; it can only assign ID but not Elements assigned name: (except for elements related to the form, only ID can be assigned) body li table tr td th p p span pre dl dt dd font b and so on.
Here I raise another question. Since you have an ID, why do you need a name?
The most direct answer: ID is like a person’s ID number, and name is like his name. Although the ID is Unique, but name can be repeated.
Specifically: for ID, it is the Identity of the HTML element on the client side. Name is actually much more complicated, because Name has many uses, so it cannot be completely replaced by ID, thus canceling it.
Reference website information is as follows: specific uses are:
Purpose 1: As a server-side identifier of HTML elements that can interact with the server, such as input, select, textarea, and button, etc. We can get the value submitted by the element on the server side based on its Name through Request.Params. Usage 2: HTML element Input type = "radio" grouping, we know that radio button controls are in the same grouping class, the check operation is mutex, and only one radio can be selected at the same time. This grouping is implemented based on the same Name attribute.
Purpose 3: Establish an anchor point in the page. We know that link is to obtain a page hyperlink. If you do not use the href attribute, use Name instead, such as : , we get a page anchor.
Usage 4: Identity as an object, such as Applet, Object, Embed and other elements. For example, in the Applet object instance, we will use its Name to refer to the object.
Purpose 5: When linking IMG elements and MAP elements, if you want to define the hotspot area of IMG, you need to use its attribute usemap, useusemap="#name"(Name of the associated MAP element)
Usage 6: Attributes of certain specific elements, such as attribute , and param . For example, define parameters for Object .
Obviously these uses cannot be simply replaced by ID, so the ID and Name of the HTML element are not the same. It's not the difference between ID number and name, they have different functions. Of course, the Name attribute of the HTML element can also play a role as an ID in the page, because in the DHTML object tree, we can use document.getElementsByName to obtain an object array containing all specified Name elements in the page.
By the way, what if there are n (n >1) HTML elements in the page with the same ID? How to reference them in DHTML object? If we use ASPX pages, this situation is not easy to happen, because the aspnet process does not allow non-unique IDs when processing aspx pages. This means that the page will throw an exception and cannot be rendered normally. If it is not a dynamic page and we insist on repeating the ID, what should we do with IE?
At this time we can still use document.getElementById to obtain objects, but we can only obtain the first object that appears during HTML Render among those objects with duplicate IDs. At this time, the repeated ID will automatically become an array when referenced, and the elements with repeated IDs will exist in the array in order of Render.
getElementById("xxx") returns the first element whose id attribute is "xxx" or a specific form element name is "xxx"
getElementsByName("xxx") returns all elements whose id attribute is "xxx" or a specific form Element whose element name is "xxx"
Let me explain here that the range of elements obtained by getElementById and getElementsByName is the same. The difference is that the former only returns the first element and the latter returns the collection of all elements.
In addition, the form element refers to the form element in