2

我查看了之前在针对 document.getElementByClassName 的跨浏览器修复中寻求帮助的请求，并发现这个链接提供了一个看似完美的修复。

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

出于任何原因，这可能无法正常工作并且无法找到任何有问题的人让它工作我问你是否能够帮助我让这个修复工作。

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

4

6 回答 6

2

这有效（经过测试）：

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

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

于 2012-01-10T10:44:24.500 回答
1

在 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");
于 2012-01-10T09:47:32.297 回答
0

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

于 2012-01-10T09:34:33.533 回答
0

如何修改代码以使用所有主流浏览器都支持的 getElementsByTagName()

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

for (var i = 0; i < elements.length; i++) {
    if (elements[i].className == t) {
        elements[i].className += ' animate';
    }
}
于 2012-01-10T09:58:55.023 回答
-3

规则是“保持简单”

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;  
    }
}
于 2013-10-04T15:54:56.120 回答
-4

我认为你应该开始使用 JQuery，因为它可以很容易地选择一个具有类名的元素，它就像 $(".className")

于 2012-01-10T09:28:19.200 回答