Summary of Javascript methods for retrieving HTML Dom node Elements

JavasSummary statement for getting HTML Dom node elements !!, This article is intended for othersArticle, Because it is easy to use, it feels very practical, so it has been used for future use !!
Thank you for your original author !!!,
For Web ApplicationsProgramIn particular, in the development of web programs, it is often necessary to obtain an element on the page and then update the style and content of the element. How to obtain the elements to be updated is the first problem to be solved. Fortunately, using javasThere are many methods for obtaining nodes from the worker node. Here we will briefly summarize the methods (the following methods have passed the test in IE7 and firefox2.0.0.11 ):

1. obtain from the top-level document node:
(1) document. getelementbyid (elementid): This method accurately obtains the required elements through the node ID, which is a simple and quick method. If the page contains multiple nodes with the same ID, only the first node is returned.
Now, multiple javas such as prototype and mootools have emerged. Library, which provides a simpler method: $ (ID), the parameter is still the node ID. This method can be considered as another way of writing document. getelementbyid (), but $ () is more powerful. For specific usage, refer to their respective API documents.
(2) document. getelementsbyname (elementname): This method obtains the node by the node name. It can be seen from the name that this method returns a node array with the same name instead of a node element. Then, we can cyclically determine whether a node is required by getting a certain attribute of the node.
For example, in HTML, both checkbox and radio use the same name attribute value to identify elements in a group. If we want to get the selected element, first obtain the reorganized element, and then cyclically determine whether the value of the checked attribute of the node is true.
(3) document. getelementsbytagname (tagname): This method obtains the node through the node tag, and also returns an array, for example, document. getelementsbytagname ('A') returns all hyperlink nodes on the page. Before obtaining a node, you generally know the node type. Therefore, this method is relatively simple. 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 two above. It is not a proprietary method of the document node, but can also be applied to other nodes, as mentioned below.

2. obtain from the parent node:
(1) parentobj. firstchild: This method can be used if the node is the first subnode of a known node (parentobj. This attribute can be used recursively, that is, it supports parentobj. firstchild..., so that you can obtain deeper nodes.
(2) parentobj. lastchild: Obviously, this attribute is the last subnode for obtaining known nodes (parentobj. Like firstchild, it can also be used recursively.
In use, if we combine the two, it will be more exciting, that is, parentobj. firstchild. lastchild. lastchild...
(3) parentobj. childnodes: Get the array of subnodes of known nodes, and then find the desired node through loops or indexes.
Note: tests show that IE7 obtains an array of direct subnodes, while firefox2.0.0.11 obtains all subnodes, including subnodes.
(4) parentobj. Children: Get the array of direct subnodes of known nodes.
Note: The test shows that IE7 works the same as childnodes, but firefox2.0.0.11 does not. This is why I want to use different styles than other methods. Therefore, it is not recommended.
(5) parentobj. getelementsbytagname (tagname. For example, parentobj. getelementsbytagname ('A') returns all hyperlinks in known subnodes.

3. Obtain from neighboring nodes:
(1) neighbournode. previussibling: Obtain the previous node of a known node (neighbournode). This attribute can be recursively used like the previous firstchild and lastchild.
(2) neighbournode. nextsibling: Obtain the next node of a known node (neighbournode). recursion is also supported.

4. obtain from the subnode:
(1) childnode. parentnode: Obtain the parent node of a known node.
The method mentioned above is only a few basic methods. If you use javas such as prototypeYou may also obtain different methods, such as using the class of the node. However, if we can use the above methods flexibly, we believe we can handle most of the programs.
Note that this document is reprinted: it is not advisable to obtain the HTML node through firstchild and lastchild. Because firstchild may return the property object of parentobj according to the browser.