28_写一个方法，统计一下html文档的元素包括元素的数量

2020-04-16 本文已影响0人沐向

一、统计html文档元素

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>写一个方法，统计一下html文档的元素包括元素的数量</title>
</head>
<body>
    <h2>标题</h2>
    <div>
        <p>段落<span>文字</span></p>
    </div>
</body>
<script></script>
</html>

1、js获取页面上的所有标签

var a = new Set([...document.querySelectorAll('*')].map(v => v.tagName));
var b = new Set(Array.from(document.querySelectorAll('*')).map(v => v.tagName));
console.log(a,b);

结果如下图：

2、js递归获取html页面所有标签

var child = document.children;
var arr = [];//用来存放获取到的所有的标签

function fn(obj) {
　　for(var i=0;i<obj.length;i++){
　　　　if(obj[i].children){//当当前元素还存在子元素的时候,递归
　　　　　　fn(obj[i].children);
　　　　}
　　　　arr.push(obj[i]); //遍历到的元素添加到arr这个数组中间
　　}
}

fn(child);

console.log(arr);//打印出最后获取到的结果 
//(12) [meta, meta, meta, title, head, h2, span, p, div, script, body, html]

3、js获取页面所有元素并统计每个标签的个数

let el = document.getElementsByTagName('*');
 
let elObj = {};
 
for(var i=0; i<el.length;i++){
    if(!elObj[el[i].tagName.toLowerCase()] ){
        elObj[el[i].tagName.toLowerCase()] = 1;
    }else{
        elObj[el[i].tagName.toLowerCase()] ++;
    }
}
 
console.log(elObj)

结果如下图：

二、js 递归调用

1、递归的概念

在程序中函数直接或间接调用自己

递归遍历是比较常用的方法，比如：省市区遍历成树、多叉树、阶乘等。

注意：使用递归函数一定要注意，处理不当就会进入死循环。递归函数只有在特定的情况下使用，比如阶乘问题。

2、例子

（1）一个阶乘的例子

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

以下代码可导致出错：

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

由于fact已经不是函数了，所以出错。

使用arguments.callee

arguments.callee 是一个指向正在执行的函数的指针，arguments.callee 返回正在被执行的对现象。
新的函数为：

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

（2）一个多叉树的例子

先看图

数据结构格式，参考如下代码：

var 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',
                },

            ]
        }
    ]
}

我们如何获取节点的所有叶子节点个数呢？递归代码如下：

/**
 * 获取 节点的所有 叶子节点 个数
 * @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;
  }
}

console.log(getLeafCountTree(headerData)); // 7