javascript document.getElementsByClassName 与 IE 的兼容性

IT技术 javascript internet-explorer class internet-explorer-8 classname

2021-01-25 05:43:15

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

我会使用 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');

6个回答

这不是一种文件方法：

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

@inquisitive_web_developer - 你现在有什么错误？它打破哪条线？

2021-04-05 05:43:15

您是在 jsFiddle.net 还是您自己的服务器/机器上进行测试？

2021-04-10 05:43:15

您可以为旧浏览器创建功能

if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
                ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}

function getElementsByClassName(className) {
if (document.getElementsByClassName) { 
  return document.getElementsByClassName(className); }
else { return document.querySelectorAll('.' + className); } }

很确定这与 Leonid 的功能相同，但document.getElementsByClassName它会在可能的情况下使用。

您无法真正复制 getElementsByClassName，因为它返回一个 nodeList，因此它的值是实时的，并随文档更新。

您可以返回共享相同类名的静态元素数组 - 但它不会“知道”文档何时更改。

（不需要太多这些东西就可以让图书馆看起来很苗条......）

function getArrayByClassNames(classes, pa){
    if(!pa) pa= document;
    var C= [], G;
    if(pa.getElementsByClassName){
        G= pa.getElementsByClassName(classes);
        for(var i= 0, L= G.length; i<L; i++){
            C[i]= G[i];
        }
    }
    else{
        classes= classes.split(/\s+/);
        var who, cL= classes.length,
        cn, G= pa.getElementsByTagName('*'), L= G.length;
        for(var i= 0; i<cL; i++){
            classes[i]= RegExp('\\b'+classes[i]+'\\b');
        }
        classnameLoop:
        while(L){
            who= G[--L];
            cn= who.className;
            if(cn){
                for(var i= 0; i<cL; i++){
                    if(classes[i].test(cn)== false) {
                        continue classnameLoop;
                    }
                }
                C.push(who);
            }
        }
    }
    return C;
}

//例子

var A= getArrayByClassNames('sideBar local')

+1 注意到与 real 不同getElementsByClassName，兼容性黑客（包括querySelectorAll）提供静态快照，而不是实时集合。

2021-04-06 05:43:15

IE8：

document.getElementsByClassName = function (className) {
    return document.querySelectorAll('.' + className)
}

不适用于我的 IE9：“对象不支持属性或方法 'querySelectorAll'”

2021-03-12 05:43:15

其它你可能感兴趣的问题

上一篇为什么“element.innerHTML+=”是糟糕的代码？下一篇JavaScript 中的转义引号