美文网首页
document.getElementByClassName 兼

document.getElementByClassName 兼

作者: lovelydong | 来源:发表于2017-08-21 20:39 被阅读0次

    因为document.getElementByClassName 方法不兼容IE ,所以要封装一个其他的方法。

    思路:

    先获取所有的tags,然后取出他们的className,然后通过字符串判断他们的class是否与目标classname一样,如果一样,则把他们取出来

    第二种情况:如果DOM元素的class名有多个

    通过字符串切割,将DOM元素的所有class名放入一个数组中遍历,如果找到目标名称,则将此元素加入数组arrClass。

    var boxClass = document.getElementsByTagName('*');

    var arrClass = [];

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

    var name = boxClass[i].className;

    var nameBox = name.split(' ');

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

    if (nameBox[j] == 'box1') {

    arrClass.push(boxClass[i]);

    }

    };

    };

    //测试

    arrClass[0].style.backgroundColor = 'green';*/

    封装此方法:

    传入两个参数,obj对象和要获取的class名(字符串)



    封装

    形参传入一个字符串,通过此方法,获取界面中所有含有此类名的DOM元素。

    并返回包含所有类名DOM的数组

    因为我们遍历所有的DOM对象很占内存,所以我们可以挑出制定的DOM对象,并从中挑出classname。

    function getClassName(para,obj){

    obj = obj||document;

    if(obj.getElementsByClassName){

    return obj.getElementsByClassName(para);

    } else {

    var boxClass = obj.getElementsByTagName('*');

    var arrClass = [];

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

    // var name = boxClass[i].className;

    var nameBox = boxClass[i].className.split(' ');

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

    if (nameBox[j] == para) {

    arrClass.push(boxClass[i]);

    }

    };

    };

    }

    return(arrClass); }


    测试

    var liBox = document.getElementById('list');

    var arr1 = getClassName('inlist',liBox);

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

    arr1[i].style.backgroundColor = '#ccc';

    }

    封装获取Id和Class的方法

    function $(para,obj){

    if(para.charAt(0) == '#' ){

    //通过截取字符串来判断执行的是获取id还是class

    var arr = para.split("#");

    var idName = arr[1];

    return document.getElementById(idName);

    } else if(para.charAt(0) == '.') {

    var arr1 = para.split(".");

    var classming = arr1[1];

    obj = obj||document;

    if(obj.getElementsByClassName){

    return obj.getElementsByClassName(classming);

    } else {

    var boxClass = obj.getElementsByTagName('*');

    var arrClass = [];

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

    var nameBox = boxClass[i].className.split(' ');

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

    if (nameBox[j] == classming) {

    arrClass.push(boxClass[i]);

    }

    };

    };

    }

    return(arrClass);

    } else {

    return false;}

    相关文章

      网友评论

          本文标题:document.getElementByClassName 兼

          本文链接:https://www.haomeiwen.com/subject/ezmhdxtx.html