JS get all tags on the page (recursive function)

1. Concept

A function calls itself directly or indirectly in a program.
Note that recursion requires a boundary condition to break the recursion. Otherwise, it will enter an infinite loop

Second, the case

1. Example of factorial

function fact(num) {
    
    
       if (num <= 1) {
    
    
             return 1;
       } else {
    
    
             return num * fact(num - 1);
       }
}
fact(3) // 结果为 6

The following code can cause an error: An error occurred because fact is no longer a function.

var anotherFact = fact; 
fact = null; 
alert(antherFact(4)); //出错 

Solution: Use arguments.callee
arguments.callee is a pointer to the function being executed, and arguments.callee returns the object being executed.

function fact(num){
    
     
    if (num<=1){
    
     
        return 1; 
    }else{
    
     
        return num*arguments.callee(num-1); //此处更改了。 
    } 
} 
var anotherFact = fact; 
fact = null; 
alert(antherFact(4)); //结果为24. 

Supplement: Use factorial to realize Fibonacci sequence

// 斐波那契函数 f(n) = f(n-1) + f(n-2)
function febonacci(n){
    
    
    if(n === 0){
    
    
        return 0
    }
    if(n === 1){
    
    
        return 1
    }
    return febonacci(n-1) + febonacci(n-2)
}
febonacci(10); // 55

2. Get all tags on the page

Then we need to get tags from the page. Needless to say, we will definitely think of DOM operations. After getting them, we are not sure whether an element has sub-elements. What should we do? At this time, we will definitely think of recursion

var map = {
    
    };
    //采用递归调用的方法,比较方便和简单。
    function fds(node) {
    
    

        if (node.nodeType === 1) {
    
    
            //这里我们用nodeName属性,直接获取节点的节点名称
            var tagName = node.nodeName;
            //判断对象中存在不存在同类的节点,若存在则添加,不存在则添加并赋值为1
            map[tagName] = map[tagName] ? map[tagName] + 1 : 1;
        }
            //获取该元素节点的所有子节点
        var children = node.childNodes;
        for (var i = 0; i < children.length; i++) {
    
    
            //递归调用
            fds(children[i])
        }
    }
    fds(document);
    console.log(map)

3. Example of multi-fork tree

insert image description here
Data structure format, refer to the following code:

headerData: {
    
    
  name: '总数据',
    children: [
      {
    
    
        name: '数据1',
        children: [
          {
    
    
            name: '数据11',
            children: [
              {
    
    
                name: '数据111',
              },
              {
    
    
                name: '数据112',
              }
            ]
          },
          {
    
    
            name: '数据12',
            children: [
              {
    
    
                name: '数据121',
              },
              {
    
    
                name: '数据122',
              }
            ]
          },
          {
    
    
            name: '数据13',
            children: [
              {
    
    
                name: '数据131',
              },
              {
    
    
                name: '数据132',
              }
            ]
          },
          {
    
    
            name: '数据14',
          },

        ]
      }
    ]
}

A leaf node is a node with a degree of 0, that is, a node without a child node. Simply put, it is a terminal node on any branch of a binary tree.
How do we get the number of all leaf nodes of a node? The recursive code is as follows:

/**
 * 获取 节点的所有 叶子节点 个数
 * @param {Object} json Object对象
 */
function getLeafCountTree(json) {
    
    
  if(!json.children){
    
    
      return 1;
  }else{
    
    
      var leafCount = 0;
      for(var i = 0 ; i < json.children.length ; i++){
    
    
          leafCount = leafCount + getLeafCountTree(json.children[i]);
      }
      return leafCount;
  }
}

Guess you like

Origin blog.csdn.net/weixin_43045869/article/details/126751279