getElementsByClassName in ie8 [英] getElementsByClassName in ie8

问题描述

我尝试在Internet Explorer 8中为HTML创建可折叠列表：

 < li> 
< a href =＃onclick =test（'node1'）> hello< / a> 
< ul id =node1class =nodestyle =display：none> 
< li>子项目1< / li> 
< li>子项目2< / li> 
< / ul> 
< / li> 
< li> 
< a href =＃onclick =test（'node2'）> test< / a> 
< ul id =node2class =nodestyle =display：none> 
< li>子项目1< / li> 
< li>子项目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  
 / code>。 
解决方案
这里有一个快速的解决方案，扩展 Element.prototype 和文档：
 （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 =函数（className，context）{
 var elems = document.querySelectorAll？context.querySelectorAll（。+ className）：（function（）{
 var all = context.getElementsByTagName（* 
 elements = []，
i = 0; 
 for（; i  if（all [i] .className&& + all [i] .className +）.indexOf（+ className +）> -1&&&&& indexOf.call（elements，all [i]）=== -1）elements .push（all [i]）; 
} 
 return元素; 
}）（）; 
 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  if（this [i] === prop ）return $; 
} 
 return -1; 
}; 
 window.getElementsByClassName = function（className，context）{
 if（context.getElementsByClassName） .getElementsByClassName（className）; 
 var elems = document.querySelectorAll？context.querySelectorAll（。+ className）：（function（）{
 var all = context.getElementsByTagName（*），
 elements = []，
i = 0; 
 for（; i  if（all [i] .className& + all [i] .className +）.indexOf（+ className +）> -1&&& indexOf.call（elements，all [i]）=== -1） push（all [i]）; 
} 
 return elements; 
}）（）; 
 return elems; 
}; 
}）（）; 
  
 
 
这样，你可以安全地使用 getElementsByClassName（）函数接受两个参数：
 
 
  className ：CSS类
 
 
 上下文：节点
 
 
 
I'm trying to create a collapsable list in Internet Explorer 8 for the HTML I have:
<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
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?
解决方案
Here is a quick solution by extending the Element.prototype and the 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:

className: the CSS class
context: the node


                        
这篇关于getElementsByClassName in ie8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！