Shulou(Shulou.com)06/03 Report--

This article is about how to get the dom element in javascript. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The acquisition method: 1, "document.getElementById" is obtained through ID value; 2, "document.getElementsByName" is obtained through name attribute; 3, "parent node object .firstChild", obtained through parent node, and so on.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

Summary of the methods of getting HTML DOM Node elements by JavaScript

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

1. Obtained through the top-level document node

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

Today, there are several JavaScript libraries, such as prototype, Mootools, and so on, which provide an easier method: $(id), and the parameter is still the node's id. This method can be seen as another way to write document.getElementById (), but $() is more powerful, as you can refer to their respective API documentation.

(2) document.getElementsByName (elementName): this method gets the node through the node's name. As can be seen from the name, this method does not return a node element, but an array of nodes with the same name. Then, we can cycle through whether it is the desired node or not by getting an attribute of the node.

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

(3) document.getElementsByTagName (tagName): this method gets the node through the node's Tag, and this method also returns an array, for example: document.getElementsByTagName ('A') will return all hyperlinked nodes on the page. Before you get a node, you usually know the type of the node, so it's easy to use this method. But the disadvantage is also obvious, which is that the returned array can be very large, which wastes a lot of time. So, is this method useless? Of course not, this method is different from the above two, it is not exclusive to the document node, you can also apply other nodes, which will be mentioned below.

2. Get it through the parent node

(1) parentObj.firstChild: you can use this method if the node is the first child of a known node (parentObj). This property can be used recursively, that is, it supports parentObj.firstChild.firstChild.firstChild... So that you can get deeper nodes.

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

In use, if we combine the two, we will achieve a more exciting effect, that is, parentObj.firstChild.lastChild.lastChild...

(3) parentObj.childNodes: get an array of children of known nodes, and then you can find the desired node through a loop or index.

Note: after testing, it is found that the array of direct child nodes is obtained on the IE7, while all the child nodes, including the child nodes, are obtained on the Firefox2.0.0.11.

(4) parentObj.children: gets an array of direct child nodes of known nodes.

Note: it has been tested that on IE7, it has the same effect as childNodes, but Firefox2.0.0.11 does not support it. That's why I use a different style than other methods. Therefore, it is not recommended.

(5) parentObj.getElementsByTagName (tagName): instead of repeating the usage, it returns an array of child nodes of the specified value in all the child nodes of the known node. For example: parentObj.getElementsByTagName ('A') returns all hyperlinks in known child nodes.

3. Obtain from neighboring nodes

(1) neighbourNode.previousSibling: get the previous node of the known node (neighbourNode). This attribute seems to be recursive like the previous firstChild and lastChild.

(2) neighbourNode.nextSibling: gets the next node of a known node (neighbourNode). Recursion is also supported.

4. Obtain through child nodes

(1) childNode [XSS _ clean]: get the parent of a known node.

The methods mentioned above are only basic methods, and if you use JavaScript libraries such as Prototype, you may get other different methods, such as getting through the class of a node, and so on. However, if we can apply the above methods flexibly, I believe we will be able to cope with most of the procedures.

Thank you for reading! This is the end of the article on "how to get dom elements in javascript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.