网页错误详细信息
消息: 对象不支持此属性或方法

document.getElementsByClassName('element_name')

需要自己实现下该方法,因为ie5之前的版本并不支持这个方法

有以下四种方法,第四种兼容性最好

一、

//create method getElementsByClassName for document
if(!document.getElementsByClassName){
document.getElementsByClassName = function(className, element){
var children = (element || document).getElementsByTagName('*');
var elements = new Array();
for (var i=0; i<children.length; i++){
var child = children[i];
var classNames = child.className.split(' ');
for (var j=0; j<classNames.length; j++){
if (classNames[j] == className){
elements.push(child);
break;
}
}
}
return elements;
};
}

二、

function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all :
oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i < arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}

三、

var getElementsByClass = function(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

四、

var getElementsByClassName = function (searchClass, node,tag) {
if(document.getElementsByClassName){
var nodes = (node || document).getElementsByClassName(searchClass),result = [];
for(var i=0 ;node = nodes[i++];){
if(tag !== "*" && node.tagName === tag.toUpperCase()){
result.push(node)
}
}
return result
}else{
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [],
current,
match;
var i = classes.length;
while(--i >= 0){
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
}
var j = elements.length;
while(--j >= 0){
current = elements[j];
match = false;
for(var k=0, kl=patterns.length; k<kl; k++){
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) result.push(current);
}
return result;
}
}

原文地址:http://blog.csdn.net/u011483807/article/details/49177147

解决 IE 或者兼容模式不支持 document.getElementsByClassName() 的方法的更多相关文章

  1. 解决 IE 不支持 document.getElementsByClassName() 的方法

    //create method getElementsByClassName for document if(!document.getElementsByClassName){ document.g ...

  2. 解决IE8下不支持document.getElementsByClassName的方法

    在代码前面加如下代码: if (!document.getElementsByClassName) { document.getElementsByClassName = function (clas ...

  3. WCF技术剖析之五:利用ASP.NET兼容模式创建支持会话(Session)的WCF服务

    原文:WCF技术剖析之五:利用ASP.NET兼容模式创建支持会话(Session)的WCF服务 在<基于IIS的WCF服务寄宿(Hosting)实现揭秘>中,我们谈到在采用基于IIS(或者 ...

  4. 360或其他双核浏览器下在兼容模式用chrome内核渲染的方法

    <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-COM ...

  5. document.getElementsByClassName() 原生方法 通过className 选择DOM节点

    <div id="box"> <div class="box">1</div> <div class="bo ...

  6. ie8及其以下浏览器的document.getElementsByClassName兼容性问题

    使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许 ...

  7. HTML5的兼容问题以及调用js文件的方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. meta 标签代码解决IE兼容问题,IE6,IE7,IE8,IE9,IE10(包括360的兼容模式)

    最近做了一个项目,客户反映,在360下布局错位,远程调试了一下,发现客户使用的是360的兼容模式,然而我在自己的电脑上测试的时候是正常的(兼容模式也正常):简单研究了一下360的兼容模式,在360的兼 ...

  9. [AJAX]ajax在兼容模式下失效解决办法

    使用jQuery,用ajax实现局部刷新功能,在火狐,360急速浏览器高速模式下,ie8,9都能正常运行,但切换到兼容模式下无效,解决办法有两种关闭浏览器兼容性视图,二是引入json2.js文件 这里 ...

随机推荐

  1. RabbitMQ面试问答(子文章)(持续更新)

    -----> 总文章 入口 文章目录 [-----> 总文章 入口](https://blog.csdn.net/qq_37214567/article/details/90174445) ...

  2. 项目管理工具_maven的配置

    <parent> <groupId>cn.itcast.maven</groupId> <artifactId>Parent</artifactI ...

  3. 深度学习面试题13:AlexNet(1000类图像分类)

    目录 网络结构 两大创新点 参考资料 第一个典型的CNN是LeNet5网络结构,但是第一个引起大家注意的网络却是AlexNet,Alex Krizhevsky其实是Hinton的学生,这个团队领导者是 ...

  4. 【深度学习】关于Adam

    版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_31866177/articl ...

  5. 京东HBase平台进化与演进

    https://mp.weixin.qq.com/s/7_dxrqFWwIJxNtL9-xD6FA

  6. Amazon aws s3 加速

    aws s3加速 - 工长山的专栏 - CSDN博客https://blog.csdn.net/xuanwu_yan/article/details/79160034 [实测有效]“解决国内访问s3. ...

  7. MacOS 安装配置 Laravel

    简单介绍: Laravel是一个用PHP编写的免费开源Web框架.它是由Taylor Otwell创作的,遵循MVC开发方法. 截至2015年3月,Laravel被认为是最流行的基于PHP的框架之一. ...

  8. 使用 ASP.NET Core 创建 Web API及链接sqlserver数据库

    创建 Web API https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.0& ...

  9. snmpwalk 安装与使用详解-windows下

    snmpwalk是SNMP的一个工具,它使用SNMP的GETNEXT请求查询指定OID(SNMP协议中的对象标识)入口的所有OID树信息,并显示给用户.通过snmpwalk也可以查看支持SNMP协议( ...

  10. 十一、LoadRunner组成和工作原理

    一.LoadRunner组成 虚拟用户发生器:Vuser Generator 压力调度和监控中心:Controller 压力生产器:Load Generator 压力结果分析工具:Analysis