Question

javascript如何解决ie不兼容通过类名查找HTML元素?

Answer 1

低版本IE的实现

//如果不支持getElementsByClassName这个方法
if(!document.getElementsByClassName){
  document.getElementsByClassName = function(cls , parent){
     var all = (parent || document).getElementsByTagName('*');
     var result = [];
     for(var i=0,l=all.length,el; el = all[i++]; ){
        if(el.nodeType == 1 && el.className && 
            el.className.indexOf(cls) > -1){
            result.push(el);
        }
     }
     return result;
  }
}

需要注意的是，这个方法不能像原生的方法一样，直接通过父节点调用来查找子节点

<div class="wrap">
  <a>item 1</a>
  <a class="item">item 2</a>
  <a>item 3</a>
</div>

//原生调用方法
var wrap = document.getElementsByClassName('wrap')[0];
var item = wrap.getElementsByClassName('item')[0]


//模拟后的调用方法
var wrap = document.getElementsByClassName('wrap')[0];
//这里需要吧父节点当做第二个参数传入
var item = document.getElementsByClassName('item' , wrap)[0];

追问

el.className.indexOf(cls) > -1，这里的-1是什么意思？

追答

这个是字符串查找方法的返回值

如

var str = 'change str';
alert( str.indexOf('a') ); //2
//因为'a'在str中，位于第2个，从0开始计数

alert( str.indexOf('abs') )// -1
//返回-1是因为，在str中，无法找到abs字符串的位置

也就是返回-1表示不包含的意思，大于-1表示包含的意思

追问

在js中经常分不清-1到底是负1，还是减1，好郁闷呀

追答

这样

var a = -1; //这个是负1

var b = 1; //这个是1
var c = -b;//这个是负b，也即是负1

var d = 2 - 1; //只有显示的表达为减法才是减1
var e = 3;
var f = e - d;//减法

追问

soga，太棒了

Answer 2

IE不支持该特性。需要自己重写函数

function getElementsByClassName (className) {  
            var all = document.all ? document.all : document.getElementsByTagName('*');  
            var elements = new Array();  
            for (var e = 0; e < all.length; e++) {  
                if (all[e].className == className) {  
                    elements[elements.length] = all[e];  
                    break;  
                }  
            }  
            return elements;  
        }

追问

elements[elements.length]这句是什么意思？

追答

elements是一个数组，elements.length是这个数组的长度。
这样的用法就是往数组的最末尾添加一个元素。
在这个函数里，默认elements是全局数组。