一尘不染

javascript document.getElementsByClassName与IE的兼容性

javascript

检索具有特定类的元素数组的最佳方法是什么?

我会使用document.getElementsByClassName,但IE不支持它。

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = document.getElementsByClassName(document.body,'tab');

…但是IE仍然说:

对象不支持此属性或方法

有什么想法,更好的方法,错误修复?

我不希望使用任何涉及jQuery或其他“笨拙的javascript”的解决方案。

更新:

我知道了!

正如@joe提到的,该函数不是的方法document

因此,工作代码如下所示:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = getElementsByClassName(document.body,'tab');

…此外, 如果您只需要IE8 +支持, 那么它将起作用:

if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) {
        return this.querySelectorAll("." + className);
    };
    Element.prototype.getElementsByClassName = document.getElementsByClassName;
}

像平常一样使用它:

var tabs = document.getElementsByClassName('tab');

阅读 306

收藏
2020-04-25

共1个答案

一尘不染

这不是记录方法:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

tabs = getElementsByClassName(document.body,'tab');  // no document
2020-04-25