Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to get the DOM node of HTML in JavaScript". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to get the DOM node of HTML in JavaScript" can help you solve the problem.

1. Obtained through the top-level document node

◆ document.getElementById (elementId): this method can accurately get the required elements through the ID of the node, which is a relatively basic and fast way. If there are multiple nodes with the same id on the page, only * * nodes are returned.

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

◆ document.getElementsByName (elementName): the idea is to get the node through the node's name. As you can see from the name, this key does not return a node element, but an array of nodes with the same name. Then, we can loop to determine whether it can be the desired node 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 node's checked attribute can be true.

◆ document.getElementsByTagName (tagName): the idea is to get the node through the node's Tag, and also to return an array, for example: document.getElementsByTagName ('A') will return all the hyperlinked nodes on the page. Before getting a node, you generally know the type of the node, so it is more basic 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 the proprietary key of the document node, you can also use other nodes, which will be mentioned below.

2. Get it through the parent node

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

◆ parentObj.lastChild: obviously, this attribute is a child node that gets a known parentObj. Like firstChild, it can be used recursively. In application, if we combine the two, we will achieve a more exciting effect, that is, parentObj.firstChild.lastChild.lastChild.

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

◆ parentObj.children: gets an array of direct child nodes of known nodes. Note: after testing, on IE7, the effect is the same as childNodes, but Firefox2.0.0.11 does not support it. That's why I use it differently from other styles, so I don't recommend it.

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

3. Obtain from neighboring nodes

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

◆ neighbourNode.nextSibling: gets the next node of a known node (neighbourNode), which also supports recursion.

4. Obtain through child nodes

◆ childNode [XSS _ clean]: gets the parent of a known node.

This is the end of the introduction on "how to get the DOM node of HTML in JavaScript". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.