原生JS获取指定元素下指定子元素（兼容所有浏览器）

本文转载自查看原文 2016-10-27 14:05 42110

好几天没有写博客了，今天分享下JS如何获取指定元素下指定的子元素。

原理：

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

<!DOCTYPE html>
<html lang="en">
<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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jquery 获取指定元素 JS中兼容各浏览器通过ClassName获取元素 List取指定元素 DataTables获取指定元素的行数据原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项 scrollIntoView将指定元素定位到浏览器顶部，底部，中间当一个页面中有多个form表单并且有重名的元素时，js获取指定form表单中的指定元素 vue 获取指定元素滚动条位置【Fiddler】使用fiddler抓取指定浏览器的包 RPA剖析浏览器API(获取指定页面数据)