您现在的位置:圣剑网 >> 文章频道 >> 网站技术 >> 正文
原生JS获取指定元素下指定子元素(兼容所有浏览器)
新闻来源:文章频道发布时间:2016-10-27 14:09我有话说(1)

原理:

由于JS内置获取子元素节点方法(children)不兼容低版本浏览器(ie 6-8),通过获取所有子节点(childNodes)方法获取所有子节点,循环判断取出元素子节点,存储在数组里,循环数组判断取出数组元素和传递元素相同的元素节点,具体见下面代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>获取指定元素下指定子元素children兼容写法</title>
    <style type="text/css">
    #create{width: 500px;height: 500px;margin:50px auto;border:1px solid red;}
    p{background: blue;border-bottom: 1px solid #fff;width: 100%;height: 20px;}
    </style>
    
</head>
<body>
    <div id="create">
       <p></p>
       <p></p>
       <div></div>
       <div>
         <p></p>
         <p></p>
       </div>
       <p></p>
    </div>
    <script>
       var creat = document.getElementById("create");

       function children(curEle,tagName){
               var nodeList = curEle.childNodes;
               var ary = [];
               if(/MSIE(6|7|8)/.test(navigator.userAgent)){
                   for(var i=0;i<nodeList.length;i++){
                       var curNode = nodeList[i];
                       if(curNode.nodeType ===1){
                          ary[ary.length] = curNode;
                       }
                   }
               }else{
                   ary = Array.prototype.slice.call(curEle.children);
               }
               
               // 获取指定子元素
               if(typeof tagName === "string"){
                   for(var k=0;k<ary.length;k++){
                     curTag = ary[k];
                     if(curTag.nodeName.toLowerCase() !== tagName.toLowerCase()){
                      ary.splice(k,1);
                      k--;
                     }
                   }
               }

               return ary;
       }
       console.log(children(create,"div"));
    </script>
</body>
</html>


网友评论

关于圣剑 - 广告服务 - 招聘信息 - 友情连接 - 保护隐私权 - 意见反馈 - 帮助中心 - 联系我们

Copyright © 2016 Sjian.Net Inc. All Rights Reserved.大千网络科技有限公司 版权所有

不良信息举报中心 陕ICP备10005927号 陕公网安备61010402000003号