DOM does not have the getElementsByClassName function. Only getElementsByTagName and getElementsById are supported. (At least IE and FF2 are not supported yet. I heard that Firefox3 is available)
The following is an example of my collection and sorting. We use the function to simulate the getElementsByClassName function.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Script type = "text/javascript">
// Var obj = document. getElementsByClassName ("qq ");
// Var obj = document. getElementsByClassName ("qq", "DIV ");
// Var obj = document. getElementsByClassName ("qq", "DIV", myid );
Document. getElementsByClassName = function (){
Var tTagName = "*";
If (arguments. length> 1 ){
TTagName = arguments [1];
}
If (arguments. length> 2 ){
Var pObj = arguments [2]
}
Else {
Var pObj = document;
}
Var objArr = pObj. getElementsByTagName (tTagName );
Var tRObj = new Array ();
For (var I = 0; I <objArr. length; I ++ ){
If (objArr [I]. className = arguments [0]) {
TRObj. push (objArr [I]);
}
}
Return tRObj;
}
Function test (){
Var obj = document. getElementsByClassName ("qq ");
For (var I = 0; I <obj. length; I ++ ){
Obj [I]. style. color = "# ff0000 ";
}
}
Function test2 (){
Var obj = document. getElementsByClassName ("qq", "DIV ");
For (var I = 0; I <obj. length; I ++ ){
Obj [I]. style. color = "# ff0000 ";
}
}
Function test3 (){
Var myid = document. getElementById ('OK ');
Var obj = document. getElementsByClassName ("qq", "DIV", myid );
For (var I = 0; I <obj. length; I ++ ){
Obj [I]. style. color = "# ff0000 ";
}
}
</Script>
<Style type = "text/css">
<! --
. Qq,. ee {font-size: 14px; border: 1px solid # ccc; margin: 10px; padding: 5px; font-weight: bold ;}
# OK, # ttt {border: 1px solid #666; margin: 15px ;}
-->
</Style>
</Head>
<Body>
<Input type = "button" name = "button" id = "button" value = "all elements whose classes are qq" onclick = "test ()"/>
<Br/>
<Input type = "button" name = "button" id = "button" value = "All div classes are qq elements" onclick = "test2 ()"/>
<Br/>
<Input type = "button" name = "button" id = "button" value = "element" onclick = "test3 () "/>
<Div id = "ttt">
<Div class = "ee"> Class = "ee" </div>
<Div class = "qq"> Class = "qq" </div>
<Div class = "qq"> Class = "qq" </div>
</Div>
<Div id = "OK">
Id = "OK"
<Div class = "ee"> Class = "ee" </div>
<P class = "qq"> Class = "qq", but the label is P </p>
<Div class = "qq"> Class = "qq" </div>
<Div class = "qq"> Class = "qq" </div>
</Div>
</Body>
</Html>
A Method written based on JS
Code
Document. getElementsByClassName = function (){
Var tTagName = "*";
If (arguments. length> 1 ){
TTagName = arguments [1];
}
If (arguments. length> 2 ){
Var pObj = arguments [2]
}
Else {
Var pObj = document;
}
Var objArr = pObj. getElementsByTagName (tTagName );
Var tRObj = new Array ();
For (var I = 0; I <objArr. length; I ++ ){
If (objArr [I]. className = arguments [0]) {
TRObj. push (objArr [I]);
}
}
Return tRObj;
}