Question

我已经查看过以前在document.getElementByClassName的跨浏览器修复程序中寻求帮助，并找到了this link，它提供了一个看似完美的修复程序。

但是我已经尝试在我构建的网站上实现它，但无法在IE8（我正在努力获得兼容性的浏览器）上获得修复工作（或任何其他工作）。我仍然得到“不支持对象或属性”错误，这意味着该修复显然无法正常工作。

由于任何原因，为什么这可能无法正常工作而无法找到任何有问题的人工作，我会问你是否能够帮助我解决这个问题。

我正在努力修复的网站是http://lifeswitch.org.nz.s125738.gridserver.com/

Answer 1

这有效（经过测试）：

function getElementsByClassName(cn, rootNode) {
  if (!rootNode) {
    rootNode = document;
  } 
  for (var r=[], e=rootNode.getElementsByTagName('*'), i=e.length; i--;) {
    if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) {
      r.push(e[i]); 
    }
  }
  return r;  
}

你可能会把它添加到Node.prototype，就像这样：

Node.prototype.getElementsByClassName = function(cn) {
  for (var r=[], e=this.getElementsByTagName('*'), i=e.length; i--;) {
    if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) {
      r.push(e[i]); 
    }
  }
  return r;  
}

应该将它添加到没有它的浏览器中，但它应该被拥有它的浏览器遮蔽，因为它们在原型链的下游提供它（未经测试）。

Answer 2

在IE 8+和大多数新浏览器中。

使用document.querySelector和document.querySelectorAll。这些方法允许您通过选择器访问任何元素，如在css :)中

 var e = document.querySelectorAll(".myClass"); //

它们之间的区别在于，首先从匹配元素中获取第一个元素，第二个方法获取匹配元素的集合。

在演示中：http://jsfiddle.net/f9cHr/点击文档以更改元素的颜色。

现在：

getElementsByClassName = function( className , ctx  ) {
  var context = ctx ? ( typeof ctx =="string" ? document.querySelector( ctx ) : ctx ): document;
  return context.querySelectorAll && context.querySelectorAll( "." + className ) 
};

当querySelector的函数存在时，您可以使用此函数

 if( document.querySelector && document.querySelectorAll ) { 
     //getElementsByClassName = function from above here
 } else {
    //getElementsByClassName = function you are using here
 }

使用：

   var myClassInnerMyId = 
          getElementsByClassName( "myClass" , document.getElementById( "myId") );
       // = document.querySelectorAll( "#myId .myClass");

也

  someClassesInnerOtherId = getElementsByClassName( "myClass1,myClass2" , "#otherId");

  // = document.querySelectorAll( "#otherId myClass1, #otherId myClass2");

Answer 3

您创建了一个名为getElementsByClassName的全局函数，而不是document对象上的方法。您需要致电getElementsByClassName或window.getElementsByClassName，而不是document.getElementsByClassName。

Answer 4

如何修改代码以使用getElementsByTagName（）代替所有主要browsers

支持的代码

elements = document.getElementById(id).getElementsByTagName('a');

for (var i = 0; i < elements.length; i++) {
    if (elements[i].className == t) {
        elements[i].className += ' animate';
    }
}

Answer 5

规则是“保持简单”

if( !typeof document.getElementsByClassName == 'function'){
    Object.prototype.getElementsByClassName = function(cn) {
        if (!this) return null;
        for (var r=[], e=this.getElementsByTagName('*'), i=e.length; i--;)
        if ( e[i].className.indexOf(cn)>-1) r.push(e[i]); 
        return r;  
    }
}

如果该方法存在，则不进行该功能。

另外，请确保您的示例用户友好且易读。

附录，另一种使用循环的方法......

if( !typeof document.getElementsByClassName == 'function'){
    Object.prototype.getElementsByClassName = function(cn) {
      if (!this) return null;
      var r=[],e=this.getElementsByTagName('*');
      for (i in e)
        if ( e[i].className.indexOf(cn)>-1) r.push(e[i]); 
      return r;  
    }
}

Answer 6

我认为你应该开始使用JQuery，因为它可以很容易地选择一个带有它的类名的元素，就像$（“。className”）

document.getElementsByClassName - 跨浏览器修复

6 个答案: