JS === 关于getElementsByClassName()

//练习:封装一个函数,兼容所有浏览器,通过类名取得标签。

//xxx.getElementsByClassName() IE8及以前的浏览器不兼容,定义一个函数,来实现这个功能

 

第一种 == 类名里面 只有一个

结构:

  <div class="red"></div>
  <div></div>
  <div class="red"></div>
  <div></div>
  <div class="red"></div>
  <div class="red"></div>

 

JS:

function getClass(classname){
  if(document.getElementsByClassName){                 // 如果有 true,执行
    return document.getElementsByClassName(classname); 
  }

  //兼容IE8

  var arr = [];   
  var all = document.getElementsByTagName("*")    //getElementsByTagName("*") ===取得所有标签

  for(var i = 0 ; i <all.length;i++){
    if(all[i].className == classname){
    arr.push(all[i]);
  }
}
return arr;
}

getClass("red");
alert(getClass("red").length);

 

 

第二种 == 类名里面 有多个,用空格隔开

结构:

  <div class="red"></div>
  <div></div>
  <div class="red"></div>
  <div></div>
  <div class="black red"></div>
  <div class="red"></div>

 

JS:

function getClass(classname){
  if(document.getElementsByClassName){
  return document.getElementsByClassName(classname);
 }

  var arr = [];
  var all = document.getElementsByTagName("*")   

  for(var i = 0 ; i <all.length;i++){
    var text = all[i].split(" ");    // 多个类名的时候 用空格分隔开 在遍历每一个
    for(var j = 0 ; j < text.length; j++){
    if(text[j].className == classname){   
      arr.push(all[i]);
    }
  }
 }
  return arr;
}

  getClass("red");
  alert(getClass("red").length);

解题思路:

1. 对于IE8 不支持getElementsByClassName() .. 

可以选择 getElementsByTagName("*") == 用 * 取得所有标签

遍历每个标签.className == classname 

如果是的话== 要返回,所以== 创建一个空数组,利用数组的 push方法,把每个符合条件的添加到数组中。

2. 多个类名== split()方法 = 在分成数组在遍历小数组,如果有符合的 添加进去。

 

=== getElementsByTagName("*")

猜你喜欢

转载自www.cnblogs.com/rabbit-lin0903/p/11184912.html
0条评论
添加一条新回复