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

This article mainly explains "how to get dom elements from javascript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to get dom elements from javascript"!

1. "document.getElementById" is obtained by ID value.

(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.

2. "document.getElementsByName" is obtained through the name attribute.

(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. "parent node object. FirstChild", obtained from the parent node, and so on.

(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.

At this point, I believe you have a deeper understanding of "how to get dom elements from javascript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.