这是哪儿错了吗老师
来源:4-9 解决getElementsByClassName()兼容性
ray城市之光
2019-04-23 13:35:13
/**
* Created by Administrator on 2019/4/23 0023.
*/
var getElementsByClassName = function (opts) {
var searchClass = opts.searchClass; //存储要查找的类名
var node = opts.node || document; //存储要查找的范围
var tag = opts.tag || '*'; //存储一定范围内要查找的标签
var result = [];
//判断浏览器支不支持getElementsByClassName方法,
if (document.getElementsByClassName){
//如果支持
var nodes = node.getElementsByClassName(searchClass);
if (tag !== "*"){
for (var i = 0; node = nodes[i++];){
if (node.tagName === tag.toUpperCase()){
result.push(node);
}
}
}else {
return nodes;
}
return result;
}else {
//使IE8以下的浏览器能够支持
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
var i, j;
for (var i = 0, j = 0; i < elsLen; i++){
if (pattern.test(els[i].className)){
//检测正则表达式
result[j] = els[i];
j++;
}
}
return result;
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="getElementsByClassName.js"></script>
<script>
(function () {
var myUl2= document.getElementById("myUl2");
var r = getElementsByClassName({
searchClass: "light dark",
node:myUl2
});
console.log(r[0].innerHTML)
})()
</script>
</head>
<body>
<ul id="myUl">
<li class="light">1</li>
<li class="light dark">2</li>
<li class="light">3</li>
</ul>
<ul id="myUl2">
<li class="light">1</li>
<li class="light dark">second</li>
<li class="light">3</li>
</ul>
</body>
</html>
1回答
同学你好,代码没有问题,是js代码位置的原因,如果在html结构上面,需要添加window.onload事件等到结构全部加载完之后再执行,否则获取不到myUl2元素。
有两种修改方式:
1、js代码在head标签中,添加window.onload事件。
2、将js代码放在html结构下面。
自己可以重新测试下,祝学习愉快!
相似问题