Js关于getElmentsByClassName()的兼容与封装

来源：互联网发布：seo服务公司编辑：程序博客网时间：2024/06/06 07:39

getElmentsByClassName()的兼容与封装

一.思路

我们知道getElmentsByClassName()是通过类名来获取标签，但在IE6、7、8中，它存在一丢丢的兼容问题。为解决这个兼容问题，我们的大体思路是封装函数，在函数里先判断浏览器是否支持getElmentsByClassName()，如果支持则直接返回，如果不支持就得进行判断了。
如果浏览器不支持：通过getElmentsByTagName("*")获得所有的标签，进行遍历，通过判断当前标签的ClassName与所要查找的是否一样再进行下一步，如果不一样不进行操作，如果一样则将其留下。
关于classname一样的如何留下：提前声明一个空的数组，如果一样则将其推进push();数组中。

二. 初步封装

代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 150px;height: 150px;background-color: pink;margin: 10px;}.demo{background-color: red;}</style><script>//封装类名window.onload=function(){//var dom=document.getElementsByClassName("demo");主流浏览器function getclass(classname){//如果浏览器支持，则直接返回if(document.getElementsByClassName){return document.getElementsByClassName(classname);//不用加else 因为return直接返回了}var arr=[];//用于存放满足的数组var dom=document.getElementsByTagName("*");//所有的，遍历，判断for (var i=0;i<dom.length;i++) {if(dom[i].className==classname){//推进数组里面arr.push(dom[i]);}}return arr;//返回符合的}getclass("demo");alert(getclass("demo").length);//该类名标签的个数}</script></head><body><div></div><div class="demo"></div><div></div><div></div><div class="demo"></div><div></div><div></div><div></div><div></div><div class="demo"></div></body></html>

效果：

三. 封装类名（分割）

当类名中包含几个类时上面的方法就不完善了，因此我们要把每个标签的类名分割后再进行判断。
关于分割：分割可以利用将字符串转换为数组，当然每个小类之间转换符号是空格，因此split(" ");
代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 150px;height: 150px;background-color: pink;margin: 10px;}.text{background-color: red;}</style><script>//封装类名window.onload=function(){//var dom=document.getElementsByClassName("demo");主流浏览器function getclass(classname){//如果浏览器支持，则直接返回if(document.getElementsByClassName){return document.getElementsByClassName(classname);//不用加else 因为return直接返回了}var arr=[];//用于存放满足的数组var dom=document.getElementsByTagName("*");//所有的，遍历，判断for (var i=0;i<dom.length;i++) {var txt=dom[i].split(" ");//分割此标签的小类名  在小类名里面遍历看是否有一样的for (var j=0;j<txt.length;j++) {if(txt[j]==classname){//存在符合的类  向arr数组中推domarr.push(dom[i]);}}}return arr;//返回符合的}getclass("text");alert(getclass("text").length);该类名标签的个数}</script></head><body><div></div><div class="demo"></div><div></div><div class="text"></div><div class="demo"></div><div></div><div></div><div></div><div></div><div class="demo text"></div></body></html>

效果：

四.添加id

如果只想选择某个div（有id）下面的某类标签，则需要再向函数传递id作为形参判断，先判断浏览器是否支持，再判断是否有id,其他思路同前。
代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 150px;height: 150px;background-color: pink;margin: 10px;}#one .text{background-color: red;}</style><script>//封装类名window.onload=function(){function getclass(classname,id){if(document.getElementsByTagName)//游览器支持{//有id的时候if(id){var eleid=document.getElementById(id);return eleid.getElementsByClassName(classname);}else//没有id的时候{return document.getElementsByClassName(classname);}}//不支持的时候if(id){var eleid=document.getElementById(id);var dom=eleid.getElementsByTagName("*");//获取id下面的所有元素}else{var dom=document.getElementsByTagName("*");}var arr=[];//用于存放满足的数组var dom=document.getElementsByTagName("*");//所有的，遍历，判断for (var i=0;i<dom.length;i++) {var txt=dom[i].split(" ");//分割此标签的小类名  在小类名里面遍历看是否有一样的for (var j=0;j<txt.length;j++) {if(txt[j]==classname){//存在符合的类  向arr数组中推domarr.push(dom[i]);}}}return arr;//返回符合的}getclass("text","one");alert(getclass("text","one").length);}</script></head><body><div></div><div class="demo"></div><div></div><div class="text"></div><!--只需要#one里的 .text--><div id="one"><div class="demo"></div><div></div><div></div><div></div><div></div><div class="demo text"></div></div></body></html>

效果：

阅读全文

0 0