Summary of 11 ways JavaScript gets DOM elements

In the development of Web applications, Web2.0 in particular, it is often necessary to obtain an element in a page and then update the style, content, and so on of that element. How to get the element to be updated is the first problem to be solved. Thankfully, there are many ways to get a node using JavaScript. Here's a quick summary (the following methods passed the IE7 and Firefox2.0.0.11 tests) :

1. Get through the top-level document node:

(1) document.getElementById (elementId) : this method can accurately obtain the required elements through the ID of the node, which is a relatively simple and fast method. If the page contains multiple nodes of the same id, only the first node is returned.

Today, there are several JavaScript libraries such as prototype, Mootools, and so on, which provide a simpler method: $(id), again taking the id of the node. This method can be thought of as another way of writing document.getElementById (), but $() is more powerful and can be used in their respective API documentation.

(2) document.getElementsByName (elementName) : this method gets the node through the name of the node. As can be seen from the name, this method returns not one node element, but an array of nodes with the same name. We can then loop through the desired node by getting one of its properties.

For example, in HTML, both checkbox and radio identify elements within a group by the same name attribute value. If we now want to get the selected element, we first get the reorganization element and then loop through to see if the checked attribute value of the node is true.

(3) document.getElementsByTagName (tagName) : this method gets the node through the Tag of the node, and this method also returns an array, for example: document.getElementsByTagName ('A') will return all the hyperlinked nodes on the page. Before you get a node, 1 usually knows the type of node, so it's easy to use this method. But the downside is obvious, which is that the returned array can be as large as 10 cents, which can waste a lot of time. So, is this method useless? Of course not. Unlike the two above, this method is not a proprietary method for the document node, but it can be applied to other nodes as mentioned below.

2. Get through the parent node:

(1) parentObj.firstChild: this method can be used if the node is the first child of a known node (parentObj). This property can be recursively using is also support parentObj. firstChild. firstChild. firstChild... , so that you can get a deeper level of nodes.

(2) parentObj.lastChild: obviously, this property is the last child node to get the known node (parentObj). Like firstChild1, it can also be used recursively.

In use, if we combine the two, so will be more exciting effect, namely: parentObj. firstChild. lastChild. lastChild...

(3) parentObj.childNodes: get the array of child nodes of the known nodes, and then find the required nodes through the loop or index.

Note: the test found that, on IE7, we got an array of direct child nodes, and on Firefox2.0.0.11, we got all child nodes, including child nodes.

(4) parentObj.children: get the array of direct child nodes of known nodes.

Note: IE7, and childNodes effect 1, but Firefox2.0.0.11 does not support. That's why I used a different style than the other methods. Therefore, it is not recommended to use.

(5) parentObj.getElementsByTagName (tagName) : without further details, it returns an array of child nodes of type specified in all child nodes of a known node. For example: parentObj.getElementsByTagName ('A') returns all hyperlinks in known child nodes.

3. Get through adjacent nodes:

(1) neighbourNode.previousSibling: get the first node of the known node (neighbourNode). This attribute and the previous firstChild and lastChild1 seem to be recursively usable.

(2) neighbourNode.nextSibling: get the next node of the known node (neighbourNode), which also supports recursion.

4. Get through child nodes:

(1) childNode.parentNode: get the parent node of the known node.

The methods mentioned above are just some basic methods. If you use the JavaScript library such as Prototype, you may also get other different methods, such as class from the node, and so on. However, if you can use the above methods flexibly, you should be able to deal with most of the procedures.