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(){
function getclass(classname)
{
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
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(){
function getclass(classname)
{
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
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.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)
{
if(id)
{
var eleid=document.getElementById(id);
return eleid.getElementsByClassName(classname);
}
else
{
return document.getElementsByClassName(classname);
}
}
if(id)
{
var eleid=document.getElementById(id);
var dom=eleid.getElementsByTagName("*");
}
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.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>
<div id="one">
<div class="demo"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="demo text"></div>
</div>
</body>
</html>
- 效果: