这是哪儿错了吗老师

来源: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回答

好帮手慕星星

2019-04-23

同学你好,代码没有问题,是js代码位置的原因,如果在html结构上面,需要添加window.onload事件等到结构全部加载完之后再执行,否则获取不到myUl2元素。

有两种修改方式:

1、js代码在head标签中,添加window.onload事件。

2、将js代码放在html结构下面。

自己可以重新测试下,祝学习愉快!

0

0 学习 · 4826 问题

查看课程