getElementsByClassName函数实现获取指定类名的子元素列表
语法如下：
var elements = getElementsByClassName(element, names);
使用示例如下：
如果html元素
<div id="example">
<p id="p1" class="aaa bbb"/>
<p id="p2" class="aaa ccc"/>
<p id="p3" class="bbb ccc"/>
</div>
对应的DOM节点为example, 那么
- getElementsByClassName(example, “aaa”); 运行结果为包含id为p1, id为p2的元素列表
- getElementsByClassName(example, “bbb ccc”);运行结果为包含id为p3的元素列表
- getElementsByClassName(example, “ccc bbb”);运行结果为包含id为p3的元素列表
请实现getElementsByClassName方法，要求浏览器兼容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="example">
<p id="p1" class="aaa bbb"/>1
<p id="p2" class="aaa ccc"/>2
<p id="p3" class="bbb ccc"/>3
</div>
<script>
function getElementsByClassName(element, names) {
if (element.getElementsByClassName) { //特性侦测
return element.getElementsByClassName(names)[0]
//优先使用W3C规范
} else {
var elements = element.getElementsByTagName('*');//获取所有后代元素
//选择包含类名的元素
var result = [];
var element,
classNameStr,
flag;
names = names.split(' ');//将字符串分割为字符串数组，方便下面循环判断
for (var i = 0; element = elements[i]; i++) {
classNameStr = ' ' + element.className + ' ';//返回所有后代元素的字符串
flag = true;
for (var j = 0, name; name = names[j]; j++) {
if (classNameStr.indexOf(' ' + name + '') == -1) {//索引所有后代元素的字符串是否含有name
flag = false;
break;
}
}
if (flag) {
result.push(element);
}
}
return result[0];
}
}
var text = getElementsByClassName(document, 'aaa bbb');
alert(text.innerHTML);
</script>
</body>
</html>
-
if (element.getElementsByClassName) { //特性侦测首先我们会对浏览器做一个兼容性的判定，如果浏览器支持，我们优先使用W3C规范 -
var elements = element.getElementsByTagName('*');//获取所有后代元素如果没有，那我们先获取后代所有元素然后进行过滤，选择包含类名的元素 -
names = names.split(' ');//将字符串分割为字符串数组，方便下面循环判断过滤的思路是，先获取所有当前传入参数所有后代元素的字符串形式，然后用一个循环对上述字符串进行索引，若没有索引到则跳出循环，若索引到就返回其中的元素
