0

js关于getElementsByClassName()

已有 142 阅读此文人 - - JS -

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

//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(“*”)

期待你一针见血的评论,Come on!