javascript ie8 中的 getElementsByClassName

getElementsByClassName in ie8

提问by stefan

I'm trying to create a collapsable list in Internet Explorer 8 for the HTML I have:

我正在尝试在 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>

in javascript i have

在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";
 }

I'm using this to call it:

我用这个来称呼它：

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

Unfortunately, this method is not working in IE8, and neither is querySelectAll. Can someone provide an example how to fix this please?

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

回答by MateyY

Here is a quick solution by extending the Element.prototypeand the document:

这是通过扩展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);
        };
    }
}
})();

It's not always, however, the best idea to extend the prototype object, especially with a function named exactly like a non-existent native function. If you want to escape the problems caused by extension of the prototype, use this code:

然而，扩展原型对象并不总是最好的主意，尤其是使用与不存在的本机函数完全一样命名的函数。如果你想逃避原型扩展带来的问题，可以使用以下代码：

(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;
    };
})();?

That way, you can safely use a getElementsByClassName()function that accepts two arguments:

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

1. className: the CSS class
2. context: the node

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

回答by I Hate Lazy

IE8 doesn't support getElementsByClassName, but it does support querySelectorAll.

IE8 不支持getElementsByClassName，但支持querySelectorAll.

To use querySelectorAll, you need a valid class selector, which means it needs to use the Selectors API syntax for a class, which uses a .to signify a class.

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

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";
}

回答by slebetman

You can implement it yourself if it's not there:

如果它不存在，您可以自己实现它：

// shim for older browsers:
if (!document.getElementsByClassName) {
    document.getElementsByClassName = (function(){
        // Utility function to traverse the DOM:
        function traverse (node, callback) {
            callback(node);
            for (var i=0;i < node.childNodes.length; i++) {
                traverse(node.childNodes[i],callback);
            }
        }

        // Actual definition of getElementsByClassName
        return function (name) {
            var result = [];
            traverse(document.body,function(node){
                if (node.className == name) {
                    result.push(node);
                }
            });
            return result;
        }
    })()
}

Now you can use document.getElementsByClassNamein older browsers. One difference between the shim and the native implementation is that the shim returns a real array rather than nodelist (or htmlelementcollection).

现在您可以document.getElementsByClassName在较旧的浏览器中使用。shim 和本机实现之间的一个区别是，shim 返回一个真正的数组，而不是节点列表（或 htmlelementcollection）。