- 2020-06-01 08:11:03
1. Get through the top-level document node:
(1) document.getElementById (elementId) : this method can accurately obtain the required elements through the ID of the node, which is a relatively simple and fast method. If the page contains multiple nodes of the same id, only the first node is returned.
(2) document.getElementsByName (elementName) : this method gets the node through the name of the node. As can be seen from the name, this method returns not one node element, but an array of nodes with the same name. We can then loop through the desired node by getting one of its properties.
For example, in HTML, both checkbox and radio identify elements within a group by the same name attribute value. If we now want to get the selected element, we first get the reorganization element and then loop through to see if the checked attribute value of the node is true.
(3) document.getElementsByTagName (tagName) : this method gets the node through the Tag of the node, and this method also returns an array, for example: document.getElementsByTagName ('A') will return all the hyperlinked nodes on the page. Before you get a node, 1 usually knows the type of node, so it's easy to use this method. But the downside is obvious, which is that the returned array can be as large as 10 cents, which can waste a lot of time. So, is this method useless? Of course not. Unlike the two above, this method is not a proprietary method for the document node, but it can be applied to other nodes as mentioned below.
2. Get through the parent node:
(1) parentObj.firstChild: this method can be used if the node is the first child of a known node (parentObj). This property can be recursively using is also support parentObj. firstChild. firstChild. firstChild... , so that you can get a deeper level of nodes.
(2) parentObj.lastChild: obviously, this property is the last child node to get the known node (parentObj). Like firstChild1, it can also be used recursively.
In use, if we combine the two, so will be more exciting effect, namely: parentObj. firstChild. lastChild. lastChild...
(3) parentObj.childNodes: get the array of child nodes of the known nodes, and then find the required nodes through the loop or index.
Note: the test found that, on IE7, we got an array of direct child nodes, and on Firefox188.8.131.52, we got all child nodes, including child nodes.
(4) parentObj.children: get the array of direct child nodes of known nodes.
Note: IE7, and childNodes effect 1, but Firefox184.108.40.206 does not support. That's why I used a different style than the other methods. Therefore, it is not recommended to use.
(5) parentObj.getElementsByTagName (tagName) : without further details, it returns an array of child nodes of type specified in all child nodes of a known node. For example: parentObj.getElementsByTagName ('A') returns all hyperlinks in known child nodes.
3. Get through adjacent nodes:
(1) neighbourNode.previousSibling: get the first node of the known node (neighbourNode). This attribute and the previous firstChild and lastChild1 seem to be recursively usable.
(2) neighbourNode.nextSibling: get the next node of the known node (neighbourNode), which also supports recursion.
4. Get through child nodes:
(1) childNode.parentNode: get the parent node of the known node.