以下内容仅当给自己的记录和参考
1,统计页面标签种类数量
使用window.document获取当前页面document对象,遍历当前节点及其子节点
// 广度优先遍历
var myDoc = window.document;
function getTagNum(myDoc) {
var tempArr = []; // 广度优先遍历数组
var resObj = {}; // 存储统计结果
if(myDoc != null) {
// 将根节点推入tempArr;
tempArr.unshift(myDoc);
while(tempArr.length != 0) {
// 从tempArr头部取出存储的节点
var tags = tempArr.shift();
// 若该节点为标签节点,则进行统计
if(tags.nodeType === 1){
if(resObj[tags.nodeName]) {
resObj[tags.nodeName] += 1;
}else{
resObj[tags.nodeName] = 1;
}
}
// 遍历当前节点的子节点,逐个推入tempArr
for(var i = 0; i < tags.childNodes.length; i++) {
tempArr.push(tags.childNodes[i]);
}
}
}
return resObj;
}
// 递归完成深度优先遍历
var tagCollection = {}; // 存储结果
var myDoc = window.document;
function getTagNum(myDoc) {
// 处理当前传入节点
if(myDoc && myDoc.nodeType === 1){
if(tagCollection[myDoc.nodeName]){
tagCollection[myDoc.nodeName] += 1;
}else{
tagCollection[myDoc.nodeName] = 1;
}
}
// 遍历当前节点的子节点,分别调用getTagNum(myDoc)函数本身
for(var i = 0; i < myDoc.childNodes.length; i++) {
getTagNum(myDoc.childNodes[i]);
}
}
2.给定一个URL如https://www.dingtalk.com/spring/welcome.html?city=hangzhou&date=20190418,请封装一个函数(可以有多种实现)来输出如下结果
{
protocol:’https’,
host:’www.dingtalk.com’,
pathname:’spring/welcome.html’,
params:{
city:’hangzhou’,
date:’20190418’
}
}
第一反应是正则,但是不会,先不考虑。。
用最简单的,split shift操作
function test1(url) {
var res = {}; // 存储结果
var arr = url.split('://'); // 将url用 :// 分隔成数组
res.protocal = arr.shift(); // 此时协议为arr[0],使用shift弹出(这样后续操作就不需要再管协议部分)
arr = arr[0].split('/'); // 此时数组只剩下协议后边那部分,用 / 分隔
res.host = arr.shift(); // 与上面相同的操作弹出域名部分
var arr2 = arr.join('/').split('?'); // 此时数组剩下path和param部分,用 / 组合,还原path部分,并用?分隔数组,此时arr2包含两项:路径,参数
res.pathname = arr2.shift(); // 弹出路径
var paramArr = arr2.join('').split('&'); // 参数部分转为字符串再用 & 分隔
var tempObj = {}; // 存储参数的obj
for(let i = 0; i < paramArr.length; i++) { //遍历所有参数项
paramArr[i] = paramArr[i].split('='); // 每一项用 = 分隔成key和value,保存成数组,再赋给原来的项
tempObj[paramArr[i][0]] = paramArr[i][1]; // obj[key] = value
}
res.params = tempObj; //保存完的obj赋给res的参数。。
return res;
}