Home > Developer > JavaScript
JavaScript Gets the element node A total of three methods, respectively, through the element ID, through the tag name and through the class name to obtain;
1. Get element object by ID value of element id attribute-getElementById ()
The DOM provides a method named getElementById () that returns an object corresponding to an element node with the same ID value in parentheses. He is a unique function of the document object, which has only one parameter, only the ID value of the element you want to get, which must be enclosed in single or double quotes.
Note: The JavaScript language is case-sensitive, so don't write getElementById getElementById, so you don't get the element object you want.
<body> <div id= "id" > </div>
<script type= "Text/javascript" > alert (typeof document.getElementById (' id ' ) </script>
</body>
Output: Object; This shows that the getElementById () returned is indeed an object;
2. By tag name-getElementsByTagName ()
The DOM provides a method named getElementsByTagName () that returns an array of objects corresponding to an array of elements with the same tag name in parentheses. This means that all matching elements are returned as an array of elements: He is a unique function of the Document object, the function of only one parameter, only the element you want to get the tag name, this value must be placed in single or double quotation marks. The return is the array (http://www.cnblogs.com/GreenLeaves/p/5684530.html)-the arrays are introduced, then we can get his length property, the following code
<body> <div id= "id" > <ul> <li></li> <li></li> <li></li> </ul> </div> <script type= "Text/javascript" > Alert (document.getElementsByTagName (' li '). length); </script></body>Output: 3, proving that Getelementbytagname () returned is indeed an array of element objects;
2.1 getElementsByTagName () allows a wildcard (asterisk character *) to be used as his argument, which means that each element in the document will have a place in the return value of the function; If you want to know how many element nodes there are in an HTML document, As shown in the following code :
<body> <div class= "p a" > <div class= "A" > </div> </div> <div Class= "A" > </div> <div class= "A" > </div> <script type= "Text/javascript" > alert (document.getelementsbytagname (' * '). length); </script></body>3. Get the Element object by the class name of the class attribute-getelementsbyclassname ()
The HTML5 Dom adds a long-awaited approach to Getelementsbyclassname (), which allows us to access elements through the class name of the Class attribute. However, some of the DOM may not have been implemented (basically implemented), so be careful when you use it.
The DOM provides a method named Getelementsbyclassname () that returns an array of objects corresponding to an array of elements with the same class name in parentheses. This means that all matching elements are returned as an array of elements. He is a unique function of the document object, which has only one parameter, only the class name of the element you want to get, which must be enclosed in single or double quotes. The return is the array (http://www.cnblogs.com/GreenLeaves/p/5684530.html)-the arrays are introduced, then we can get his length property, the following code
<body> <div class= "A" > </div> <div class= "A" > </div> <div Class= "A" > </div> <script type= "Text/javascript" > Alert ( Document.getelementsbyclassname (' a '). length); </script></body>Output: 3, proving that Getelementsbyclassname () returned is indeed an array of element objects;
Because the Getelementsbyclassname () method is very useful, but some browsers may not support it, so we have to use the existing Dom method to implement his function, as shown in the following code:
<body> <div id= "target" > <div class= "a" > </div> <div class= "a" > </div> <div class= "A" > </div> </div> <script type= "Text/javascript" >/*First step: Given the search starting point node; The second step: Determine whether the DOM implements Getelementsbyclassname () This method, has normal return, did not use the existing DOM method to achieve the same effect returns the matching element array*/ functionGetelementsbyclassname_zdy (node,classname) {if(node.getelementsbyclassname) {returnnode.getelementsbyclassname (classname); } Else { varResults =Array (); varelements = node.getelementsbytagname (' * ')); for(vari = 0; i < elements.length; i++) { if(Elements[i].classname.indexof (className)! =-1) {Results[results.length]=Elements[i]; } } returnresults; }} alert (Getelementsbyclassname_zdy (document.getElementById (' Target '), ' a '). Length)</script></body>
How JavaScript Gets the element node
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
