Getelementsbyclassname () Usage:
In programming, we are accustomed to getting objects using the following methods:
getElementById (' id ') getelementsbyname (' name ')getElementsByTagName (' tag ')The first object that can get the specified ID value, the second can get a collection of objects with the value of the specified Name property, and the third is a collection of objects that gets the name of the specified label. These three ways in writing code is very common, of course, is also very convenient, this time may be a lot of friends have this thought, the class attribute as a common property of the tag, there is no way to get the object by the class attribute value, in fact, this method is not not:
getElementsByTagName ("Class")This method implements the function we want, which can get a collection of objects with the specified class attribute value, but unfortunately with browser compatibility issues.
The code example is as follows:
<! DOCTYPE html>window.onload=function() { document.getelementsbyclassname (" MyTest ") [0].style.color=" #F00 ";} </script>The above code works perfectly in Google, Firefox, and IE8 browsers, but the IE8 and IE8 browsers do not support this function. Although this function is sure to be very spirited in the future when the lower version of IE exits the market, it is best not to use this function directly at this moment, but we can simulate implementing this function.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Getelementsbyclassname () Usage details-ant tribe</title><Scripttype= "Text/javascript">varGetelementsbyclass=function(Searchclass,node,tag) {varclasselements=NewArray (); if(Node==NULL) {node=document; } if(Tag==NULL) {tag='*'; } varEls=node.getelementsbytagname (tag); varElslen=els.length; varpattern=NewRegExp ("(^|\\s)"+Searchclass+"(\\s|$)"); for(i=0, J=0; I<Elslen;i++) { if(Pattern.test (els[i].classname)) {Classelements[j]=Els[i]; J++; } } returnclasselements;} Window.onload=function() {Getelementsbyclass ("haha")[0].style.color="#F00";}</Script></Head><Body> <Divclass= "mytest haha">Hello everyone</Div></Body></HTML>The above code simulation implements the Getelementsbyclassname () function, the following is a brief introduction to how to implement this function:
I. Principle of implementation:
Get a collection of objects using the getElementsByTagName () function, and then use the FOR Loop statement to traverse each object and use Pattern.test () to detect whether the ClassName property value of the object contains content that matches the regular expression. If there is one, the object has the specified class property value, stores the object in the Classelements array, and finally returns this array, which is the object with the specified class property value.
Two. Code comments:
1.var classelements=new Array () to create an array to hold the object with the specified class property value.
2.if (Node==null), determines whether the node is specified, and if not, uses document as the default node. The lookup range for getElementsByTagName () is specified.
3.if (Tag==null), determines whether a label name is specified, and if not, uses a wildcard character (*), which is to get all the tags.
4.var Els=node.getelementsbytagname (tag) that gets the object with the specified label name under the specified node.
5.var Elslen=els.length, gets the number of objects.
6.var pattern=new RegExp ("(^|\\s)" +searchclass+ "(\\s|$)") creates a regular object that specifies how to retrieve the object with the given class attribute value. There is a need for some regular expression knowledge. The use of these rules is to be compatible with class= "mytest haha" This form of class attribute value and prevent a class attribute value containing the class attribute value to be retrieved is matched, for example, a class= "Haorenyisheng", Another class= "Hao", if you want to retrieve "Hao", so that "Haorenyisheng" will not be matched.
The 7.for loop is used to facilitate the ClassName property value of each object (that is, the class attribute value), and to detect compliance with the matching rule, and then save the object to the Classelements array if compliant.
8.return classelements, returns an array object, which is the object with the specified class property value.
9.getElementsByClass ("haha") [0].style.color= "#F00", set the font color to #f00 for objects with the class property value "haha".Getelementsbyclassname () Usage explanation
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
