ie8中的getElementsByClassName

Question

我正在尝试在Internet Explorer 8中为我的HTML创建一个可折叠列表:

<li>
 <a href="#" onclick="test('node1')">hello</a>
 <ul id="node1" class="node" style="display:none">
   <li>Sub-item 1</li>
   <li>Sub-item 2</li>
 </ul>
</li>
<li>
 <a href="#" onclick="test('node2')">test</a>
  <ul id="node2" class="node" style="display:none">
   <li>Sub-item 1</li>
   <li>Sub-item 2</li>
 </ul>
</li>

在javascript我有

function test2(className, link) {
 var e = document.getElementsByClassName(className);

 for (var i = 0, len = e.length; i < len; i++) {
   e[i].style.display = "none";
  }

  link.innerHTML = "Expand";
 }

我用它来称呼它:

      <a href="#" onclick="test2('node', this)">Collapse</a>

不幸的是,这种方法在IE8中不起作用,也没有querySelectAll.有人可以提供一个例子来解决这个问题吗？

Answer 1

这是一个快速解决方案,通过扩展Element.prototype和document:

(function() {
if (!document.getElementsByClassName) {
    var indexOf = [].indexOf || function(prop) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === prop) return i;
        }
        return -1;
    };
    getElementsByClassName = function(className, context) {
        var elems = document.querySelectorAll ? context.querySelectorAll("." + className) : (function() {
            var all = context.getElementsByTagName("*"),
                elements = [],
                i = 0;
            for (; i < all.length; i++) {
                if (all[i].className && (" " + all[i].className + " ").indexOf(" " + className + " ") > -1 && indexOf.call(elements, all[i]) === -1) elements.push(all[i]);
            }
            return elements;
        })();
        return elems;
    };
    document.getElementsByClassName = function(className) {
        return getElementsByClassName(className, document);
    };

    if(Element) {
        Element.prototype.getElementsByClassName = function(className) {
            return getElementsByClassName(className, this);
        };
    }
}
})();

然而,扩展原型对象并不总是最好的想法,特别是对于一个名为完全类似于不存在的本机函数的函数.如果要避免原型扩展导致的问题,请使用以下代码:

(function() {
    var indexOf = [].indexOf || function(prop) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === prop) return i;
        }
        return -1;
    };
    window.getElementsByClassName = function(className,context) {
        if (context.getElementsByClassName) return context.getElementsByClassName(className);
        var elems = document.querySelectorAll ? context.querySelectorAll("." + className) : (function() {
            var all = context.getElementsByTagName("*"),
                elements = [],
                i = 0;
            for (; i < all.length; i++) {
                if (all[i].className && (" " + all[i].className + " ").indexOf(" " + className + " ") > -1 && indexOf.call(elements,all[i]) === -1) elements.push(all[i]);
            }
            return elements;
        })();
        return elems;
    };
})();?

这样,您可以安全地使用getElementsByClassName()接受两个参数的函数:

1. className:CSS类
2. context:节点

Answer 2

IE8不支持getElementsByClassName，但它支持querySelectorAll。

要使用querySelectorAll，您需要一个有效的类选择器，这意味着它需要为类使用Selectors API语法，该语法使用.来表示一个类。

function test2(className, link) {
    var e = document.querySelectorAll("." + className);

    for (var i = 0, len = e.length; i < len; i++) {
        e[i].style.display = "none";
    }

    link.innerHTML = "Expand";
}