javascript如何統計頁面中標籤的數量

antzone發表於2017-03-17
JavaScript

本章節介紹一下如何統計頁面中標籤的數量，當然標籤是可以重複的，雖然不常用，不過寄希望能夠給大家帶來或多或少的幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var elementName="";
function countTotalElement(node){
  ///Attribute  nodeType值為2，表示節點屬性
  ///Comment    nodeType值為8，表示註釋文字
  ///Document   nodeType值為9，表示Document
  ///DocumentFragment   nodeType值為11，表示Document片段
  ///Element            nodeType值為1，表示元素節點
  ///Text               nodeType值為3，表示文字節點
  var total=0;
  //1代表節點的型別為Element
  if(node.nodeType==1){
    total++;
    elementName=elementName+node.tagName+"\r\n";
  }
  var childrens=node.childNodes;
  for(var i=0;i<childrens.length;i++){
    total+=countTotalElement(childrens[i]);
  } 
  return total;
}
window.onload=function(){
  var bt=document.getElementById("bt");
  bt.onclick=function(){
    alert('標籤總數'+countTotalElement(document)+'\r\n 全部標籤如下:\r\n'+elementName);
  }
}
</script>
</head>
<body>
<a href="javascript:void(0);return false" id="bt">點選測試</a>
</body>
</html>

以上程式碼實現了我們的要求，點選按鈕可以彈出框，能夠統計頁面中標籤的數量。程式碼比較簡單，就是通過判斷節點型別，如果是元素節點就計算在內，並且結合for迴圈通過遞迴的方式實現數量統計。

一.程式碼註釋:

1.var elementName="",宣告一個變數，用來儲存標籤的名稱，並且通過字串連線將結果串聯起來。

2.function countTotalElement(node){}，此函式是功能的核心，引數是個節點物件，在本程式碼中是document節點物件。

3.var total=0，宣告一個變數並初始化為0，用來儲存標籤的數量。

4.if(node.nodeType==1)，判斷是否是元素節點。

5.total++，加1運算。

6.elementName=elementName+node.tagName+"\r\n"，標籤名稱連線起來，後面的回車換行。

7.var childrens=node.childNodes，獲取node節點的所有一級子節點。

8.for(var i=0;i<childrens.length;i++)，遍歷每一個一級子節點。

9.total+=countTotalElement(childrens);，這裡運用了遞迴的方式實現深度遍歷，也就是首先判斷一個節點，然後再去遍歷判斷它的子節點，依次類推。

10.return total，返回數量。

二.相關閱讀:

1.nodeType屬性可以參閱javascript nodeType一章節。 

2.tagName屬性可以參閱javascript tagName一章節。 

3.childNodes屬性可以參閱js childNodes一章節。 

相關文章