JS === 关于getElementsByClassName()

//练习：封装一个函数，兼容所有浏览器，通过类名取得标签。

//xxx.getElementsByClassName() IE8及以前的浏览器不兼容，定义一个函数，来实现这个功能

 

第一种 == 类名里面 只有一个

结构：

　　<div class="red"></div>
　　<div></div>
　　<div class="red"></div>
　　<div></div>
　　<div class="red"></div>
　　<div class="red"></div>

 

JS：

function getClass(classname){
　　if(document.getElementsByClassName){                 // 如果有 true，执行
　　　　return document.getElementsByClassName(classname); 
　　}

　　//兼容IE8

　　var arr = [];   
　　var all = document.getElementsByTagName("*")  　　//getElementsByTagName("*") ===取得所有标签

　　for(var i = 0 ; i <all.length;i++){
　　　　if(all[i].className == classname){
　　　　arr.push(all[i]);
　　}
}
return arr;
}

getClass("red");
alert(getClass("red").length);

 

 

第二种 == 类名里面 有多个，用空格隔开

结构：

　　<div class="red"></div>
　　<div></div>
　　<div class="red"></div>
　　<div></div>
　　<div class="black red"></div>
　　<div class="red"></div>

 

JS：

function getClass(classname){
　　if(document.getElementsByClassName){
　　return document.getElementsByClassName(classname);
　}

　　var arr = [];
　　var all = document.getElementsByTagName("*")   

　　for(var i = 0 ; i <all.length;i++){
　　　　var text = all[i].split(" ");    // 多个类名的时候 用空格分隔开 在遍历每一个
　　　　for(var j = 0 ; j < text.length; j++){
　　　　if(text[j].className == classname){   
　　　　　　arr.push(all[i]);
　　　　}
　　}
　}
　　return arr;
}

　　getClass("red");
　　alert(getClass("red").length);

解题思路：

1. 对于IE8 不支持getElementsByClassName() .. 

可以选择 getElementsByTagName("*") == 用 * 取得所有标签

遍历每个标签.className == classname 

如果是的话== 要返回，所以== 创建一个空数组，利用数组的 push方法，把每个符合条件的添加到数组中。

2. 多个类名== split()方法 = 在分成数组在遍历小数组，如果有符合的 添加进去。

 

=== getElementsByTagName("*")