1. Get through top-level document node:
(1) document.getElementById (ElementID): This method through the node ID, can accurately obtain the required elements, is a relatively simple and efficient method. If a page contains more than one node with the same ID, only the first node is returned.
(2) Document.getelementsbyname (ElementName): This method is to obtain 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. Then, we can loop through the node to determine whether it is the desired node by getting a property of it.
For example, in HTML, both checkbox and radio identify elements within a group by the same name property value. If we are going to get the selected element now, we first get the change element and then loop to determine if the node's Checked property value is true.
(3) document.getElementsByTagName (TagName): The method is to get the node through the tag of the node, and the same method returns an array, for example: document.getElementsByTagName (' A ') All the hyperlink nodes on the page will be returned. It is generally known that the node is of the type before the node is fetched, so it is easier to use this method. But the disadvantage is also obvious, that is, the return of the array can be very large, this will waste a lot of time. So is this method useless? Of course not, this method differs from the two above, it is not a proprietary method of the document node and can be applied to other nodes, as will be mentioned below.
2, through the parent node to obtain:
(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 recursively used, that is, support parentObj.firstChild.firstChild.firstChild ... The form so that you can get deeper nodes.
(2) Parentobj.lastchild: Obviously, this property is the last child node to get a known node (parentobj). As with FirstChild, it can also be used recursively.
In use, if we combine the two, we will achieve more exciting effects, namely: ParentObj.firstChild.lastChild.lastChild ...
(3) Parentobj.childnodes: Gets an array of child nodes of a given node, which can then be found by looping or indexing the desired node.
Note: After testing, it is found that an array of direct child nodes is obtained on the IE7, and all child nodes, including child nodes, are acquired on Firefox188.8.131.52.
(4) Parentobj.children: Gets an array of the direct child nodes of a given node.
Note: The test, on the IE7, and childnodes effect, and Firefox184.108.40.206 does not support. That's why I want to use different styles with other methods. Therefore, it is not recommended to use.
(5) Parentobj.getelementsbytagname (TagName): Use method no longer repeat, it returns an array of child nodes with 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, through the adjacent node to obtain:
(1) neighbournode.previoussibling: Gets the previous node of a known node (Neighbournode), which seems to be recursively used as in the previous FirstChild and LastChild.
(2) Neighbournode.nextsibling: Gets the next node of a known node (Neighbournode), which also supports recursion.
4, through the child node to obtain:
(1) Childnode.parentnode: Gets the parent node of the known node.