JavaScript gets HTML DOM parent, child, neighboring node

In Web applications, especially in the development of Web2.0 programs, it is common to get an element in the page, and then update the style, content, etc. of the element. How to get the elements to be updated is the first issue to be addressed. Thankfully, there are many ways to get nodes using JavaScript, and here's a quick summary (the following methods are passed in IE7 and Firefox2.0.0.11 tests):

1. Get through the top-level document node:

(1) document.getElementById (ElementID): The method through the node ID, can accurately obtain the required elements, is a relatively simple and fast method. If a page contains multiple nodes with the same ID, only the first node is returned.
Today, multiple JavaScript libraries, such as prototype, MooTools, and more, provide a simpler way to do this: $ (ID), and the parameter is still the ID of the node. This method can be seen as
Another way to document.getElementById (), but $ () is more powerful, and you can refer to their respective API documentation for specific usage.
(2) Document.getelementsbyname (ElementName): The method is to get the node through the name of the node, as can be seen from the name, this method returns not a node element, but a node array with the same name. We can then loop through a property of the node to determine whether it is a required node.
For example, in HTML, the checkbox and radio all use the same Name property value to identify the elements within a group. If we are now going to get the selected element, first get the group element and then loop to determine if the checked property value of the node is true.
(3) document.getElementsByTagName (TagName): This method is the node's tag to get the node, the same method also returns an array, for example:

document.getElementsByTagName (' A ') will return all hyperlink nodes on the page. Before acquiring a node, it is common to know the type of the node, so it is easier to use this method. But the disadvantage is also obvious, that is, the returned array may be very large, which will waste a lot of time. So, 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, you can also apply other nodes, which will be mentioned below.

2. Get through parent node:

(1) Parentobj.firstchild: This method can be used if the node is the first child node of a known node (parentobj). This property can be used recursively, that is, support
ParentObj.firstChild.firstChild.firstChild ... form, so you can get deeper nodes.
(2) Parentobj.lastchild: Obviously, this property is the last child node to get the known node (parentobj). As with FirstChild, it can also be used recursively.
In use, if we combine the two, then the more exciting effect will be achieved, namely: ParentObj.firstChild.lastChild.lastChild ...
(3) Parentobj.childnodes: Gets an array of child nodes of a known node, which can then be found by looping or indexing the desired node.
Note: It has been tested that an array of direct child nodes is obtained on IE7, whereas on Firefox2.0.0.11, all child nodes are included child nodes.
(4) Parentobj.children: Gets an array of direct child nodes for a known node.
Note: Tested on IE7, same as childnodes effect, and Firefox2.0.0.11 not supported. This is why I have to use different styles with other methods. Therefore, it is not recommended.
(5) Parentobj.getelementsbytagname (tagName): Use the method not to repeat, it returns all child nodes of the known node in the type of the specified value of the child node array. For example:

Parentobj.getelementsbytagname (' A ') returns all the hyperlinks in the known child nodes.

3. Get through neighboring nodes:

(1) neighbournode.previoussibling: Gets the previous node of the known node (Neighbournode), which appears to be recursively used, as in the previous FirstChild, LastChild.
(2) Neighbournode.nextsibling: Gets the next node of the known node (Neighbournode), which also supports recursion.

4. Get through child nodes:

(1) Childnode.parentnode: Gets the parent node of the known node.

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

JavaScript gets HTML DOM parent, child, neighboring node