封装getElementsByClassName

一般情况下,我们不会设置多个id来进行获取,而是用class的形式,而JS本身并没有获取className的方法,所以我们可以自己封装一个获取className的方法。

DOM结构如下

1
2
3
4
5
6
<ul id="ul1">
<li>11111111</li>
<li class="test">22222222</li>
<li>33333333</li>
<li class="test">44444444</li>
</ul>

如果要获取class为test的li,JS是没有提供直接的方法让我们获取的,所以我们自己需要封装一个获取className的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
function getClass(className){
var aEle = document.getElementsByTagName('*');
var arr = [];

for(var i=0;i<aEle.length;i++){
if(aEle[i].className == className){
arr.push(aEle[i]);
}
}
return arr;
}
var aLi = getClass('test');
console.log(aLi);

打印结果
查看demo
如果出现有多个class该怎么匹配呢?

1
2
3
4
5
6
<ul id="ul1">
<li>11111111</li>
<li class="test">22222222</li>
<li>33333333</li>
<li class="test test1">44444444</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function getClass(parent,className){
var aEle = parent.getElementsByTagName('*');
var arr = [];

for(var i=0;i<aEle.length;i++){
// if(aEle[i].className == className){
// arr.push(aEle[i]);
// }
var aClassName = aEle[i].className.split(' ');
for(var j=0;j<aClassName.length;j++){
if(aClassName[j] == className){
arr.push( aEle[i] );
break;
}
}
}
return arr;
}
var oUl1 = document.getElementById('ul1');
var aLi = getClass('test');
console.log(aLi);

如果只是想选中ul1下面的test呢?

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="ul1">
<li>11111111</li>
<li class="test">22222222</li>
<li>33333333</li>
<li class="test test1">44444444</li>
</ul>
<ul id="ul2">
<li>11111111</li>
<li class="test">22222222</li>
<li>33333333</li>
<li class="test test1">44444444</li>
</ul>

那么就要从父级下去查找test,由于父级是可变的,所以我们通过参数传递的方式获取父级

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function getClass(parent,className){
var aEle = parent.getElementsByTagName('*');
var arr = [];

for(var i=0;i<aEle.length;i++){
// if(aEle[i].className == className){
// arr.push(aEle[i]);
// }
var aClassName = aEle[i].className.split(' ');
for(var j=0;j<aClassName.length;j++){
if(aClassName[j] == className){
arr.push( aEle[i] );
break;
}
}
}
return arr;
}
var oUl1 = document.getElementById('ul1');
var oUl2 = document.getElementById('ul2');
var aLi = getClass(oUl2,'test1');
console.log(aLi);

接着,咱们把结构改变下

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul id="ul1">
<li>11111111</li>
<li class="test test">22222222</li>
<li>33333333</li>
<li class="test test1">44444444</li>
</ul>
<ul id="ul2">
<li>11111111</li>
<li class="test test">22222222</li>
<li>33333333</li>
<li class="test test1">44444444</li>
</ul>
<p class="test">ppppppppppp</p>

多了一个test的p标签,而我们的需求只是想选中test为li的标签,如果还是刚才那段js,会把所有的test都选择到,所以我们需要从我们需要的标签名下,获取test

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function getClass(parent,tagName,className){
var aEle = parent.getElementsByTagName(tagName);
var arr = [];

for(var i=0;i<aEle.length;i++){
// if(aEle[i].className == className){
// arr.push(aEle[i]);
// }
var aClassName = aEle[i].className.split(' ');
for(var j=0;j<aClassName.length;j++){
if(aClassName[j] == className){
arr.push( aEle[i] );
break;
}
}
}
return arr;
}
var oUl1 = document.getElementById('ul1');
var oUl2 = document.getElementById('ul2');
var aLi = getClass(document,'li','test');
for(var i=0;i<aLi.length;i++){
aLi[i].style.background = '#ccc';
}
console.log(aLi);