JavaScript思维导图——Day 13(dom选择器、节点类型)

不会java不改名

于 2020-02-18 22:36:41 发布

阅读量192

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_45174208/article/details/104384374

版权

JavaScript 专栏收录该内容

42 篇文章

订阅专栏

本文深入探讨了HTML中特定元素的子节点获取方法，通过JavaScript实现了对div元素下所有子节点的遍历与筛选，专注于返回所有类型为元素节点的子节点。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="only">
        <p></p>
    </div>
    <div></div>
    <div>
        <p id="123"></p>
    </div>
    <div></div> -->
    <!-- <div>
        <strong></strong>
    </div>
    <div>
        <span>
            <strong class="demo"></strong>
        </span>
    </div> -->
    <div>42421<strong><span></span></strong>
    <span></span>
    </div>
    <div id="123" class="2342"> </div>

    <script type="text/javascript">
        // var div = document.getElementById('only');
        // var div = document.getElementsByTagName('div');
        // var p = document.getElementsByTagName('p');
        // var strong = document.querySelector('div > span > strong.demo');
        // var strong1 = document.querySelectorAll('div > span > strong');
        var div = document.getElementsByTagName('div')[1];
        function retElementChild(node) {
            var arr = [],
                len = node.childNodes.length;
            for(var i = 0 ; i < len; i++){
                if (node.childNodes[i].nodeType === 1) {
                    arr.push(node.childNodes[i]);
                }

            }
            return arr;

        }
        console.log(retElementChild(div));
    </script>
    
</body>
</html>