平时写HTML时多用class来命名,为很少用id来命名,主要原因就是class使用起来比较灵活。
但是万恶的JS在操作DOM的时候对ie6+只提供了getElementById和getElementsByTagName两个方法来查找DOM。
这时候就很尴尬了,就不得不在HTML里加入各种各样的id。看了就烦,不爽
Js有提供一个通过class名查找DOM的方法:getElementsByClassName();
但是。。。。。。只支持ie9+ -.-,哎呀好尴尬。。。
只好自己写一个兼容IE的getElementsByClassName()方法出来:
// indexOf兼容
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(x) {
var result = -1;
if (this.length == 0) {
return result;
}
for (var i = 0; i < this.length; i++) {
if (this[i] === x) {
result = i;
break;
}
}
return result;
}
}
// getElementsByClassName兼容
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(c_name, ele) {
//用于输出找到的匹配的DOM元素
var arr = [];
// 查找元素,并计算数组长度
var allTag = (ele || document).getElementsByTagName('*');
var tagLength = allTag.length;
// 对传进来的c_name参数进行分割,并计算数组长度
var cNameList = c_name.split(' ');
var cNameLength = cNameList.length;
// 对所有的tag元素进行遍历
for (var i = 0; i < tagLength; i++) {
// 对每一个tag的class属性进行分割,并计算数组长度
var classList = allTag[i].className.split(' ');
var listLength = classList.length;
// 定义一个空数组
var judge = [];
for (var t = 0; t < cNameLength; t++) {
// 如果cNamelist可以在classList中找到,就给judge push一个true
if (classList.indexOf(cNameList[t]) !== -1) {
judge.push(true);
}
}
// 判断judge是否相等cNameLength,如果相等,表示是我们需要的元素
if (judge.length === cNameLength) {
arr.push(allTag[i]);
}
}
return arr;
}
}
<div id="box">
<div class="one two"></div>
<div class="one three"></div>
<div class="one"></div>
<div class="one"></div>
</div>
<div class="one"></div>
<div class="one"></div>
这个兼容代码可以实现:
1. document.getElementsByClassName("one two");
只找到<div class="one two"></div>
2. document.getElementsByClassName("one");
找到所有div中存在class名为one的元素
3.document.getElementsByClassName("one",document.getElementById("box"));
找到box下的所有存在class名为one的元素