js統計html中標籤出現次數最多的標籤
阿新 • • 發佈:2019-01-08
思路:要統計標籤出現的次數,首先肯定要獲取html中的標籤,然後再統計各個標籤出現的次數。因為不能一下子獲得所有的標籤,所以只能先獲得根元素,然後通過獲取它的子元素來進行統計。
很久沒有用原生js了,所以誤以為childNodes是獲得當前元素的所有子節點,後來才發現只是獲取當前元素的直接子節點。。。如果能一下子獲取所有節點那太簡單了,直接統計就行了。可是這個只能獲取直接子節點,所以還得加上遞迴才行。
假設有如下html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<title>test</title>
<style></style>
</head>
<body>
<div><div>1</div></div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
現在統計上述html中出現次數最多的標籤:
<script>
//先獲取根節點html
var root = document.getElementsByTagName("html")[0];
//這裡定義一個數組,存放物件型別,物件中有兩個屬性,一個是標籤名name,一個是標籤出現的數量num
var tags = [];
//這個函式用來統計子節點中各個標籤出現的數量,引數是要統計的子節點的父節點
function build(root){
//首先獲取引數節點的子節點,不然怎麼統計是不是?
var children = root.childNodes;
//因為children得到的是一個節點(包括文字節點和元素節點)集合,而且沒法用陣列的一些方法,所以這裡定義一個childs陣列,將children裡面的文字節點顧慮掉(因為文字節點不在統計的標籤內,所以上面可以選擇用root.children,因為root.children獲取的是元素節點不包括文字節點,當時不知道...),並存放於陣列中,以使用陣列中的一些方法。
var childs = [];
for(var j=0; j<children.length; j++){
//過濾文字節點,將元素節點放於childs陣列中
if(typeof children[j].tagName !== 'undefined'){
childs.push(children[j]);
}
}
//遍歷childs中的標籤,判斷tags陣列中是否包含childs中的標籤,如果不包含就加到tags陣列後面,如果包含,就將標籤對應的數量加1
for(var i=0; i<childs.length; i++){
var flag = 0;
for(var j=0; j<tags.length; j++){
if(tags[j].name === childs[i].tagName){
tags[j].num++;
flag = 1;
break;
}
}
if(!flag){
var temp = {};
temp.name = childs[i].tagName;
temp.num = 1;
tags.push(temp);
}
//遞迴統計每個子節點的子節點中包含的標籤及數量
build(childs[i]);
}
}
build(root);
//假設出現最多的標籤數是0,下標為-1
var max = 0;
var index = -1;
//遍歷獲取標籤出現次數最多的一個
tags.forEach(function(v,i,tags){
if(v.num > max){
max = v.num;
index = i;
}
});
console.log("標籤出現最多的是:" + tags[index].name + "\n出現的次數為:" + tags[index].num);
</script>
執行結果:
剛剛說了獲取元素節點可以直接使用Element.children屬性,所以可以直接像下面這樣寫:
<script>
var root = document.getElementsByTagName("html")[0];
var tags = [];
function build(root){
// var children = root.childNodes;
// var childs = [];
// for(var j=0; j<children.length; j++){
// if(typeof children[j].tagName !== 'undefined'){
// childs.push(children[j]);
// }
// }
var childs = root.children;
for(var i=0; i<childs.length; i++){
var flag = 0;
for(var j=0; j<tags.length; j++){
if(tags[j].name === childs[i].tagName){
tags[j].num++;
flag = 1;
break;
}
}
if(!flag){
var temp = {};
temp.name = childs[i].tagName;
temp.num = 1;
tags.push(temp);
}
build(childs[i]);
}
}
build(root);
var max = 0;
var index = -1;
tags.forEach(function(v,i,tags){
if(v.num > max){
max = v.num;
index = i;
}
});
console.log("標籤出現最多的是:" + tags[index].name + "\n出現的次數為:" + tags[index].num);
</script>
執行結果一樣。