【js】递归遍历所有后代元素

最新推荐文章于 2023-02-16 08:20:54 发布

evan_qb

最新推荐文章于 2023-02-16 08:20:54 发布

阅读量5.2k

点赞数 1

分类专栏：前端文章标签：递归 javascript

本文链接：https://blog.csdn.net/evan_qb/article/details/79128789

版权

前端专栏收录该内容

76 篇文章 1 订阅

订阅专栏

html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>递归的应用</title>
    <style>
        div{
            height: 50px;
            margin: 20px;
        }
    </style>
</head>
<body>
</div>
<div class="d1">
    <div class="d1-1">
        <div class="d1-1-1"></div>
        <div class="d1-1-2"></div>
        <div class="d1-1-3"></div>
        <div class="d1-1-4"></div>
        <div class="d1-1-5"></div>
    </div>
    <div class="d1-2"></div>
    <div class="d1-3"></div>
    <div class="d1-4"></div>
    <div class="d1-5"></div>
    <div class="d1-6"></div>
</div>
<div class="d2">
    <div class="d2-1">
        <div class="d2-1-1"></div>
        <div class="d2-1-2"></div>
    </div>
    <div class="d2-2"></div>
    <div class="d2-3">
        <div class="d2-3-1"></div>
    </div>
</div>
</body>

需求，我们需要将body下的这些子盒子全都加上边框

代码实现:

<script>
    //给所有的盒子添加边框
    //我们可以通过childNodes来获取所有的子节点
    var allNodes = [];
    function getChildNode(node){
        //先找到子结点
        var nodeList = node.childNodes;
        for(var i = 0;i < nodeList.length;i++){
            //childNode获取到到的节点包含了各种类型的节点
            //但是我们只需要元素节点  通过nodeType去判断当前的这个节点是不是元素节点
            var childNode = nodeList[i];
            //判断是否是元素结点
            if(childNode.nodeType == 1){
                childNode.style.border = "1px solid pink";
                getChildNode(childNode);
            }
        }
    }
    getChildNode(document.body);
</script>