以下內容僅當給自己的記錄和參考
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;
}