Javascript obtains html dom parent, child, and adjacent nodes

In Web applications, especially Web development, you often need to obtain an element on the page, and then update the style and content of the element. How to obtain the elements to be updated is the first problem to be solved. It is gratifying to note that there are many methods to obtain nodes using JavaScript. Here we will summarize the following methods (the test passes in IE7 and Firefox2.0.0.11 ):

1. obtain from the top-level 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.
Today, 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 viewed
Document. getElementById () is another method, but $ () is more powerful. For more information about how to use it, see their API documentation.
(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 this method 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... form, so that you can get a deeper node.
(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.