JS method for obtaining the parent node

Source: Internet
Author: User

How to obtain the elements to be updated is the first problem to be solved. It is gratifying to note that there are many methods to obtain nodes using JavaScript. Here we will summarize the following methods (the test passes in IE7 and Firefox2.0.0.11 ):
1. obtain from the top-level document node:
(1)Document. getElementById (elementId):This method can accurately obtain the required elements through the node ID, which is relatively simple and quick. 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 method:$ (Id)The parameter is still the node id. This method can be viewedDocument. getElementById ()But$ ()For more powerful functions, refer to their API documentation for specific usage.
(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 is used to obtain the node through the node Tag. This method also returns an array, for example:Document. getElementsByTagName ('A ')All hyperlink nodes on the page are returned. 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. Is this method useless? Of course not. This method is different from the above two. It is not a proprietary method of the document node. It can also be applied to other nodes, which will be 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 supportsParentObj. firstChild...To obtain more in-depth nodes.
(2)ParentObj. lastChild: Obviously, this attribute is the last subnode to obtain a known node (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: Obtain the subnode array 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:: It was tested that IE7 has the same effect 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): The usage method is not described in detail. It returns an array of subnodes of the specified type in all subnodes of known nodes. 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 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 methods mentioned above are only some basic methods. If Prototype and other JavaScript libraries are used, different methods may be obtained, 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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.