JavaScript to get html dom node Elements

In the development of Web applications, especially Web 2.0 programs, it is often necessary to obtain an element on the page, and then update the style and content of the element. The first question is how to obtain the elements to be updated.

BKJIA recommended reading: JavaScript DOM document traversal practice

It is gratifying to note that there are many ways to use JavaScript to obtain nodes. Here we will summarize the following:

1. obtain from the top-level document Node

◆ Document. getElementById (elementId. If the page contains multiple nodes with the same id, only the first node is returned.

Today, multiple JavaScript libraries such as prototype and Mootools have emerged. They provide a simpler approach: $ (id), and the parameter is still the node id. This approach can be considered as another way of writing document. getElementById (), but $ () is more powerful. For specific usage, refer to their respective API documents.

◆ Document. getElementsByName (elementName): Get the node by the node name. From the name, we can see that this essentials 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 can be true.

◆ Document. getElementsByTagName (tagName): obtains a node by using the node Tag, and returns an array, for example, document. getElementsByTagName ('A') returns all hyperlink nodes on the page. Before getting a node, you generally know the node type. Therefore, this approach is basic.

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 essentials useless? Of course not. This essentials is different from the above two. It is not a proprietary essentials of the document node. You can also use other nodes, which will be mentioned below.

2. obtain from the parent node

◆ ParentObj. firstChild: If the node is the first subnode of the known node parentObj, you can use this approach. This attribute can be used recursively, that is, it supports parentObj. firstChild..., so that you can obtain deeper nodes.

◆ ParentObj. lastChild: Obviously, this attribute is the last subnode for obtaining the known node parentObj. Like firstChild, it can also be used recursively. In application, if we combine the two, we will achieve more exciting results, namely parentObj. firstChild. lastChild. lastChild.

◆ ParentObj. childNodes: obtains the array of subnodes of known nodes, and then finds the required nodes through loops or indexes. Note: after testing, we found that on IE7, we obtained an array of direct sub-nodes, and on Firefox2.0.0.11, we obtained all the sub-nodes, that is, the sub-nodes including the sub-nodes.

◆ ParentObj. children: Obtain the array of direct subnodes of known nodes. Note: according to tests, IE7 works the same as childNodes, but Firefox2.0.0.11 does not. This is also the reason why I want to use different styles than others, so it is not recommended to use them.

◆ ParentObj. getElementsByTagName (tagName. For example, parentObj. getElementsByTagName ('A') returns all hyperlinks in known subnodes.

3. Obtain from neighboring nodes

◆ NeighbourNode. previussibling: Obtain the previous node of the known node neighbourNode). This attribute can be recursively used like the previous firstChild and lastChild.

◆ NeighbourNode. nextSibling: Obtain the next node of a known node neighbourNode. recursion is also supported.

4. obtain from the subnode

◆ ChildNode. parentNode: Obtain the parent node of a known node.

The essentials mentioned above are just some basic essentials. If Prototype and other JavaScript libraries are used, different essentials may be obtained, such as through the class of the node. However, if you can use the above essentials flexibly, I believe most of the programs can be handled.