使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许多这个类脚本都是围绕着getElementByClassName()建立的,这种解决方法在HTML5中被标准化,另外,这种方法还本地存在于现代浏览器中,getElementByClassName()只使用一个字符串值作为输入.并返回一个Nodelist,这个NodeList包含所有类名称匹配这个字符串值的元素:
  var el = document.getElementsByClassName('foo');
  通过在字符串中使用空格分隔类,也可以匹配多个类,下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素:
  var el = document.getElementsByClassName('foo bar');
Google Chrome、Firefox、Opera、Safari、IE9及更新版本都支持javascript的document.getElementsByClassName函数，而IE6 IE7 IE8不支持document.getElementsByClassName，我们只能自己给document增加一个自定义函数getElementsByClassName，让IE 6-8也支持document.getElementsByClassName 以下是IE6 IE7 IE8 document.getElementsByClassName的代码及实例。

（Xee：因为我要兼容IE8浏览器… 这里有几个比较高效的方法,它们会先检测是否支持getElementsByClassName，支持了就使用原生的该方法…）

//-----------------------------✄---经过修正之后的--------------------------------------

//------------------------------✄--使用document.getElementsByClassName()调用----------------------------

if(!document.getElementsByClassName){

document.getElementsByClassName = function(className){

var children = 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;

};

}

//------------------------------✄--这两个函数相似----------------------------//-------------------------✄--使用getElementsByClassName()调用-------------------

 function getElementsByClassName(strClass){

    if(document.getElementsByClassName){

        return document.getElementsByClassName(strClass);

    }

    strClass=strClass.replace(/^ +| +$/g,"");

    var aClass=strClass.split(/ +/);

    var eles=document.getElementsByTagName("*");

    for(var i=0;i<aClass.length;i++){

        var a=[]

        var reg=new RegExp("(^| )"+aClass[i]+"( |$)");

        for(var j=0;j<eles.length;j++){

            var ele=eles[j];

            if(reg.test(ele.className)){

                a.push(ele);

            }

        }

        eles=a;

    }

    return eles;

}

下面这个方法也使用了正则进行匹配的..使用document.getElementsByClassName()调用..

/* 为IE6 IE7 IE8增加document.getElementsByClassName函数 */

/MSIE\s*(\d+)/i.test(navigator.userAgent);

var isIE=parseInt(RegExp.$1?RegExp.$1:0);

if(isIE>0&&isIE<9){

        document.getElementsByClassName=function(cls){

                var els=this.getElementsByTagName('*');

                var ell=els.length;

                var elements=[];

                for(var n=0;n<ell;n++){

                        var oCls=els[n].className||'';

                        if(oCls.indexOf(cls)<0)        continue;

                        oCls=oCls.split(/\s+/);

                        var oCll=oCls.length;

                        for(var j=0;j<oCll;j++){

                                if(cls==oCls[j]){

                                        elements.push(els[n]);

                                        break;

                                }

                        }

                }

                return elements;

        }

}

onload=function(){

        var els=document.getElementsByClassName('xc');

        var l=els.length;

        for(var n=0;n<l;n++){

                alert(els[n].outerHTML);

        }

}

就介绍了这些方法，可以选用比较短小的使用，注意使用的参数…（Xee:上面的都是一个参数（即要查询的那个class名）。）

再附录实例：//---------------------------------------------------------------------✄------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="zh" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>用原生JS获取CLASS对象</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="generator" content="EverEdit" />

    <meta name="author" content="" />

    <meta name="keywords" content="" />

    <meta name="description" content="" />

</head>

<body>

    <div id="w2" class="test">

        <span class="test"></span>

    </div>

    <div id="w1" class="test">

        <div id="ce" class="test">

            <ul>

                <li class="q">qw1</li>

                <li class="q">qw2</li>

                <li class="ww">ww</li>

                <li class="a">a</li>

                <li class="bbb">bbb</li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

    </div>

<script type="text/javascript">

 if(!document.getElementsByClassName){

document.getElementsByClassName = function(className){

var children = 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;

};

}

 document.getElementsByClassName("ww")[0].style.color='red'; //演示：查找css类名为"ww"的标签个数

</script>

</body>

</html>

ie8及其以下浏览器的document.getElementsByClassName兼容性问题的更多相关文章

  1. javascript中document.getElementsByClassName兼容性封装方法一

    var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...

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

    原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中,不能使用. 修改:加入兼容性判断,在需要用到该方法的位置修改为getClassNames方法. ...

  3. 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题

    document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下     ...

  4. 兼容IE8以下，获取className节点的元素(document.getElementsByClassName()兼容写法)。

    因为ie8一下不兼容                 document.getElementsByClassName()                 功能:通过class的名字获取符合条件的元素 ...

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

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

  6. document.getElementsByClassName方法的重写(OVERRIDE)

    众所周知,对于IE8以下的浏览器(IE8居然是WIN7预装的)没有document.getElementsByClassName,网上也有很多重写的方法,以下是本人在项目中所使用的方法 documen ...

  7. JS与浏览器的几个兼容性问题

    第一个:有的浏览器不支持getElementsByClassName(),所以需要写一个function()来得到需要标签的class,然后进行class的增加.删除等操作. 第二个:在需要得到特定标 ...

  8. 浏览器对DIV+CSS兼容性问题大总结

    浏览器对DIV+CSS兼容性问题大总结 接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...

  9. 支持IE6、IE7、IE8等低端浏览器的简化版vue

    最近研究Vue的底层原理,写了一个简化版的Vue,可以在支持IE6.IE7.IE8等低端浏览器运行.由于低端浏览器不支持对象属性定义,所以设置属性不支持直接赋值,需要调用虚拟机实例的set方法.目前只 ...

随机推荐

  1. Java 中常用缓存Cache机制的实现

    所谓缓存,就是将程序或系统经常要调用的对象存在内存中,一遍其使用时可以快速调用,不必再去创建新的重复的实例.这样做可以减少系统开销,提高系统效率. 所谓缓存,就是将程序或系统经常要调用的对象存在内存中 ...

  2. AngularJs angular.equals

    angular.equals 对比两个对象/值是否相等.支持值类型.正则表达式.数组和对象. 如果下列至少有一个是正确的,则将两个对象/值视为相等. 两个对象/值能通过===比较. 两个对象/值是同一 ...

  3. HDU 1394 Minimum Inversion Number（最小逆序数/暴力 线段树 树状数组 归并排序）

    题目链接: 传送门 Minimum Inversion Number Time Limit: 1000MS     Memory Limit: 32768 K Description The inve ...

  4. android toast几种使用方法

    toast经常会用到,今天做个总结,特别是自定义toast的布局,值得一看. 一.默认展示 // 第一个参数:当前的上下文环境.可用getApplicationContext()或this // 第二 ...

  5. JavaWeb学习总结-05 Servlet 学习和使用(01)

    一 Servlet的原理 1 Servlet 的创建 当Servlet容器启动web应用时,需要立即加载Servlet时: Servlet容器启动web应用时,将按照指定的顺序初始化Servlet,需 ...

  6. POJ3612:Telephone Wire

    传送门 一道很棒的DP题目. 裸的DP方程很好搞: $f[i][j]=min \{ f[i-1][k]+ C \times |k-j| +(k-a[i])^2 \}$ 这个复杂度显然无法承受,考虑优化 ...

  7. 64位centos下安装python的PIL模块

    http://blog.csdn.net/xiaojun1288/article/details/8673529

  8. java的对象的总结：(PO,VO,DAO,BO,POJO)

    一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...

  9. 【原】javascript执行环境及作用域

    最近在重读<javascript高级程序设计3>,觉得应该写一些博客记录一下学习的一些知识,不然都忘光啦.今天要总结的是js执行环境和作用域. 首先来说一下执行环境 一.执行环境 书上概念 ...

  10. HTTPS 客户端验证 服务端证书流程

    网上的文章很多, 但是对摘要的验证流程不够通俗易懂. QQ截图20160420114804.png 证书预置和申请 1:客户端浏览器会预置根证书, 里面包含CA公钥2:服务器去CA申请一个证书3: C ...