JS get HTML DOM node element method summary

1. Get through the top-level document node:
(1) document.getElementById (ElementID): Gets the node by ID, if the page contains more than one node with the same ID, then only the first node is returned.
(2) Document.getelementsbyname (elementname): Gets the node by name, as you can see from the name, 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 now want to get the selected element, first get the group element, and then loop to determine whether the checked property value of the node is true.
(3) document.getElementsByTagName (TagName): Through the node's tag to get the node, return an array, this method and the above two different, it is not a proprietary method of the document node, you can also apply other nodes, It will be mentioned below.
2. Get through parent node:
(1)Parentobj.firstchild | |FirstelementchildThis method can be used if the node is the first child node of a known node (parentobj).
(2)parentobj. LastChild | | LastElement Child: 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: 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, as with the childnodes effect,and Firefox2.0.0.11 does not support it. 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 a known child node.
3. Get through neighboring nodes:
(1)Neighbournode.previoussibling | |previouselementsibling: Gets the previous node of the known node (Neighbournode), which appears to be recursively used, as in the previous FirstChild, LastChild.
(2)Neighbournode.nextSibling | |nextelementsibling: 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.

Note that this is a reprinted document: it is not advisable to get HTML node through FirstChild and LastChild. Because, depending on the browser, it is possible for FirstChild to return the Parentobj Property object.

(2) childnode.offsetparent will take the first absolute/relative positioning of the hierarchy parent as OffsetParent if there is no absolute/relative positioning then return body

(3) Obj.tagname gets the label name of the object
obj.classname Gets the style name of the object
Obj.style.cssText= "background: #333, ...... ..... ..... ...................
obj.textcontent
Obj.childelementcount
obj.contenteditable=true

JS get HTML DOM node element method summary