美文网首页
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 兼

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

  • 解决document.getElementByClassName

    document.getElementByClassName()对IE9以下存在兼容性问题,所以我们要写函数来解决...

  • 校园里总是发生着无聊的闲扯之事,置身于境内,学校的颓废是每个校内的每个同学都有所感。多少的孩子们都想去外面的世界...

  • 午兼丙龙来立午兼丙宅,收子兼癸水,戍兼乾水上堂,出艮兼寅口消去

    午兼丙龙来立午兼兼丙宅,收子兼癸水,戍兼乾水上堂,出艮兼寅口消去。兴工日课:丁酉, 丙午,丁丑,壬寅。农历2017...

  • 醉酒的Z和霸气的我

    中年男人Z,我的司机兼保姆兼秘书兼工程师兼长期饭票兼财务总管兼出气筒,在我的印象里还是个自控力不太差的人,醉酒的次...

  • 兼性人生兼性教育

    上世纪90年代,一部《渴望》火遍大江南北。50集的电视剧,情节拖沓冗长,但里面的主人公“刘慧芳”却深入人心。 细细...

  • 时兼

    南方的雨说来就来,就像我的悲伤一样毫无预兆。我是一个大大咧咧的女孩,但有一颗敏感而脆弱的心。一个人在杭州举目无亲,...

  • 兼莨

    不要被感动 不要得意忘形 不要期待理解和帮助 不要试图要求和控制 不要怒不可遏 无需多言 如此便可心止

  • 兼相爱

    一直都觉得:人性本善,认为每个人最初都是善良的个体,或许一些场合、一些人会表现出恶意、暴露出恶相,我也愿意相信是因...

  • 兼独

    江南三月春光媚,听学不知窗外美。 中央空调本无意,病从凉薄衣上起? 忽忆梁祝化蝶舞,又起相思喜鹊桥。 哪敢攀日众人...

网友评论

      本文标题:document.getElementByClassName 兼

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