一、统计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
网友评论