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

最新推荐文章于 2024-05-29 21:52:44 发布

weixin_30449453

最新推荐文章于 2024-05-29 21:52:44 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wenjiajia/p/6003729.html

本文介绍了如何使用原生JavaScript在所有浏览器中获取指定元素下的特定子元素，针对低版本IE浏览器不兼容的问题，提出通过遍历childNodes来解决，并提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好几天没有写博客了，今天分享下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>