递归

最新推荐文章于 2022-08-07 16:47:35 发布

web_blog

最新推荐文章于 2022-08-07 16:47:35 发布

阅读量117

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_43248623/article/details/106466295

版权

javascript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

使用递归遍历所有的后代元素

 // 递归两个典型案例: 阶层和斐波那契数列
        // n! = n * (n - 1)

        function mul(n) {
          // n的阶层
          // for (var i = 1; i <= n; i++) {
          //   num *= i;
          // }

          if (n === 1 || n === 0) {
            return 1;
          }
          return n * mul(n - 1);
        }
          // 递归  就是return 公式  递归只有一点好处  让代码更加简洁 速度慢
          // 1、找规律(公式)
          // 2、找出口(已知条件)
          mul(5);
          // 计算过程 先执行的最后执行完 所以计算速度慢
          mul(5) ==> 5 * mul(4)
                            ↓
                         mul(4) ==> 4 * mul(3)
                                          ↓
                                        mul(3) ==> 3 * mul(2)
                                                          ↓
                                                       mul(2) ==> 2 * mul(1)

          // 递归实现 斐波那契数列
           fb(n) == fb(n - 1) + fb(n - 2)
           function fb(n){
             if(n === 1 || n === 2){
               return 1
             }
             return fb(n - 1) + fb(n - 2)
           }
          fb(5) ===> fb(4)          +         fb(3);
                        ↓                       ↓
                     fb(4) ==> fb(3) + fb(2); fb(3) ==> fb(2) + fb(1);
                                ↓
                              fb(3) ==> fb(2) + fb(1);

方式1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script>
      window.onload = function() {
        // 给页面中所有的元素添加一个边框 1px solid pink
        // DOM中，没有提供直接获取后代元素的API
        // 但是可以通过childNodes来获取所有的子节点

        // 先找body的所有子元素
        // 再找body的子元素的所有子元素

        //  var allChildren = [];
        function getChildNode(node) {
          // 先找子元素
          var nodeList = node.childNodes;
          var result = [];
          // 在用子元素找子元素  这里就可以递归了
          // for循环中的条件，就充当了结束的条件
          for (var i = 0; i < nodeList.length; i++) {
            // childNode获取到的节点包含了各种类型的节点
            // 但是我们只需要元素节点 通过nodeType去判断当前的这个jedi按
            var childNode = nodeList[i];
            // 判断是否是元素节点
            if (childNode.nodeType == 1) {
              result.push(childNode);
              var temp = getChildNode(childNode);
              console.log(temp);
              result = result.concat(temp);
              console.log(result);
            }
          }
          return result;
        }
        var arr = getChildNode(document.body);
        console.log(arr);

        for (var i = 0; i < arr.length; i++) {
          var child = arr[i];
          child.style.border = "1px solid pink";
        }
      };
    </script>
  </head>
  <body>
    <div>
      1div
      <p>1p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>2p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>3p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>4p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>5p<span>1span</span><span>2span</span><span>3span</span></p>
    </div>
    <div>
      2div
      <p>1p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>2p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>3p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>4p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>5p<span>1span</span><span>2span</span><span>3span</span></p>
    </div>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>
  </body>
</html>

方式2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script>
      window.onload = function() {
        // 给页面中所有的元素添加一个边框 1px solid pink
        // DOM中，没有提供直接获取后代元素的API
        // 但是可以通过childNodes来获取所有的子节点

        // 先找body的所有子元素
        // 再找body的子元素的所有子元素

        var allChildren = [];
        function getChildNode(node) {
          // 先找子元素
          var nodeList = node.childNodes;
          // 在用子元素找子元素  这里就可以递归了
          // for循环中的条件，就充当了结束的条件
          for (var i = 0; i < nodeList.length; i++) {
            // childNode获取到的节点包含了各种类型的节点
            // 但是我们只需要元素节点 通过nodeType去判断当前的这个jedi按
            var childNode = nodeList[i];
            // 判断是否是元素节点
            if (childNode.nodeType == 1) {
              allChildren.push(childNode);
              getChildNode(childNode);
            }
          }
        }
        getChildNode(document.body);
        for (var i = 0; i < allChildren.length; i++) {
          var child = allChildren[i];
          child.style.border = "1px solid pink";
        }
      };
    </script>
  </head>
  <body>
    <div>
      1div
      <p>1p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>2p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>3p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>4p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>5p<span>1span</span><span>2span</span><span>3span</span></p>
    </div>
    <div>
      2div
      <p>1p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>2p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>3p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>4p<span>1span</span><span>2span</span><span>3span</span></p>
      <p>5p<span>1span</span><span>2span</span><span>3span</span></p>
    </div>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>
  </body>
</html>

web_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
递归

方式1<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> <script> window.onload = function() { // 给页面中所有的元素添加一个边框 1px solid pink // DOM中，没有提供直接获取
复制链接

扫一扫

专栏目录