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

一、统计html文档元素

HTML：

写一个方法，统计一下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

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

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