JS Get Node method

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 thought of as an alternative to document.getElementById (), but the function of $ () is more powerful, and the specific usage can refer to their respective API documentation.
(2)document.getelementsbyname (elementname): The method is to get the node through the name of the node, as the name implies, this method returns not a node element, but an array of nodes 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 obtains the node through the node's tag, and the same method 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.firstchildThis 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 that gets 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 for a known node, which can then be found by looping or indexing the desired node.
Note: The test found that the array of direct child nodes was obtained on IE7, and that all child nodes were included as child nodes on Firefox2.0.0.11.
(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): The method is not used again, it returns an array of child nodes of the specified value in all child nodes of the known node. For example: Parentobj.getelementsbytagname (' A ') returns all the hyperlinks in a known child node.
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.

JS Get Node method