Javascript to obtain the parent and child nodes of a specified node on a webpage

In actual development, we often need to obtain an html element on the page and dynamically update the style and content attributes of the element.
So how can we get these elements to be updated? There are many methods to obtain these nodes using JavaScript. Below are some methods to summarize.

1. obtain from the document Node:
(1) document. getElementById (elementId): This method accurately obtains the required elements through the node ID, which is a simple and quick method. If the page contains multiple nodes with the same id, only the first node is returned.
For example, multiple JavaScript libraries such as prototype and Mootools have emerged. They provide a simpler method: $ (id), and the parameter is still the node id. This method can be considered as another way of writing document. getElementById (), but $ () is more powerful. For specific usage, refer to their respective API documents.
(2) document. getElementsByName (elementName): This method obtains the node by the node name. It can be seen from the name that this method returns a node array with the same name instead of a node element. Then, we can cyclically determine whether a node is required by getting a certain attribute of the node.
For example, in HTML, both checkbox and radio use the same name attribute value to identify elements in a group. If we want to get the selected element, first obtain the reorganized element, and then cyclically determine whether the value of the checked attribute of the node is true.
(3) document. getElementsByTagName (tagName): This method obtains the node through the node Tag, and also returns an array, for example, document. getElementsByTagName ('A') returns all hyperlink nodes on the page. Before obtaining a node, you generally know the node type. Therefore, this method is relatively simple. But the disadvantage is also obvious, that is, the returned array may be very large, which will waste a lot of time. Is this method useless? Of course not. This method is different from the above two. It is not a proprietary method of the document node. It can also be applied to other nodes, which will be mentioned below.

2. obtain from the parent node:
(1) parentObj. firstChild: This method can be used if the node is the first subnode of a known node (parentObj. This attribute can be used recursively, that is, it supports parentObj. firstChild..., so that you can obtain deeper nodes.
(2) parentObj. lastChild: Obviously, this attribute is the last subnode for obtaining known nodes (parentObj. Like firstChild, it can also be used recursively.
In use, if we combine the two, it will be more exciting, that is, parentObj. firstChild. lastChild. lastChild...
(3) parentObj. childNodes: Get the array of subnodes of known nodes, and then find the desired node through loops or indexes.
Note: tests show that IE7 obtains an array of direct subnodes, while Firefox2.0.0.11 obtains all subnodes, including subnodes.
(4) parentObj. children: Get the array of direct subnodes of known nodes.
Note: The test shows that IE7 works the same as childNodes, but Firefox2.0.0.11 does not. This is why I want to use different styles than other methods. Therefore, it is not recommended.
(5) parentObj. getElementsByTagName (tagName. For example, parentObj. getElementsByTagName ('A') returns all hyperlinks in known subnodes.

3. Obtain from neighboring nodes:
(1) neighbourNode. previussibling: Obtain the previous node of a known node (neighbourNode). This attribute can be recursively used like the previous firstChild and lastChild.
(2) neighbourNode. nextSibling: Obtain the next node of a known node (neighbourNode). recursion is also supported.

4. obtain from the subnode:
(1) childNode. parentNode: Obtain the parent node of a known node.
The methods mentioned above are only some basic methods. If Prototype and other JavaScript libraries are used, different methods may be obtained, such as using the class of the node. However, if we can use the above methods flexibly, we believe we can handle most of the programs.