A summary of 11 ways JavaScript gets DOM elements

a summary of 11 ways JavaScript gets DOM elements

This article mainly introduces JavaScript to get DOM elements of 11 methods summary, this article uses in 4 Big class 11 methods to summarize how to obtain the DOM element, the need friend may refer to the next

In Web applications, especially WEB2.0 program development, you often get an element in the page and then update the element's style, content, and so on. How to get the element to be updated is the first problem to solve. Thankfully, there are a number of ways to get nodes using JavaScript, and here's a quick summary (the following methods are passed in the IE7 and Firefox2.0.0.11 tests):

1. Get through top-level document node:

(1) document.getElementById (ElementID): This method through the node ID, can accurately obtain the required elements, is a relatively simple and efficient method. If a page contains more than one node with the same ID, only the first node is returned.

Today, multiple JavaScript libraries such as prototype, MooTools, and so on, provide a simpler way: $ (ID), and the parameter is still the ID of the node. This method can be viewed as another form of document.getElementById (), but the $ () feature is more powerful and can be referenced in their respective API documentation.

(2) Document.getelementsbyname (ElementName): This method is to obtain the node through the name of the node, as can be seen from the name, this method returns not a node element, but a node array with the same name. Then, we can loop through the node to determine whether it is the desired node by getting a property of it.

For example, in HTML, both checkbox and radio identify elements within a group by the same name property value. If we are going to get the selected element now, we first get the change element and then loop to determine if the node's Checked property value is true.

(3) document.getElementsByTagName (TagName): The method is to get the node through the tag of the node, and the same method returns an array, for example: document.getElementsByTagName (' A ') All the hyperlink nodes on the page will be returned. It is generally known that the node is of the type before the node is fetched, so it is easier to use this method. But the disadvantage is also obvious, that is, the return of the array can be very large, this will waste a lot of time. So is this method useless? Of course not, this method differs from the two above, it is not a proprietary method of the document node and can be applied to other nodes, as will be mentioned below.

2, through the parent node to obtain:

(1) Parentobj.firstchild: This method can be used if the node is the first child node of a known node (parentobj). This property can be recursively used, that is, support parentObj.firstChild.firstChild.firstChild ... The form so that you can get deeper nodes.

(2) Parentobj.lastchild: Obviously, this property is the last child node to get a known node (parentobj). As with FirstChild, it can also be used recursively.

In use, if we combine the two, we will achieve more exciting effects, namely: ParentObj.firstChild.lastChild.lastChild ...

(3) Parentobj.childnodes: Gets an array of child nodes of a given node, which can then be found by looping or indexing the desired node.

Note: After testing, it is found that an array of direct child nodes is obtained on the IE7, and all child nodes, including child nodes, are acquired on Firefox2.0.0.11.

(4) Parentobj.children: Gets an array of the direct child nodes of a given node.

Note: The test, on the IE7, and childnodes effect, and Firefox2.0.0.11 does not support. That's why I want to use different styles with other methods. Therefore, it is not recommended to use.

(5) Parentobj.getelementsbytagname (TagName): Use method no longer repeat, it returns an array of child nodes with the specified value in all child nodes of the known node. For example: Parentobj.getelementsbytagname (' A ') returns all the hyperlinks in a known child node.

3, through the adjacent node to obtain:

(1) neighbournode.previoussibling: Gets the previous node of a known node (Neighbournode), which seems to be recursively used as in the previous FirstChild and LastChild.

(2) Neighbournode.nextsibling: Gets the next node of a known node (Neighbournode), which also supports recursion.

4, through the child node to obtain:

(1) Childnode.parentnode: Gets the parent node of the known node.

The method mentioned above is just some basic method, and if you use a JavaScript library such as prototype, you may also get a different approach, such as getting through the class of the node, and so on. However, if the above methods can be flexibly applied, it is believed that most of the procedures should be met.