JavaScript 統計當前頁面標籤個數和種類

簡單的遍歷,熟悉一下dom節點的屬性,用的是html Dom ,節點還可以用xml 的dom來解析比如把children 換成childNodes,文本節點便會被統計進來,順便實現了簡單的map功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="section">
        <input id="search"/>
        <input id="search"/>
        <input id="search"/>
        <input id="search"/>
        <ul id="datalist">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
    </div>
  </body>
  <script type="text/javascript">

    var map = {};
    function printTree(node){
      // console.log(node.nodeName.toLowerCase(),node.nodeType);
      var temp_tag = node.nodeName.toLowerCase();
      if(map[temp_tag]!=null)map[temp_tag]++;
      else map[temp_tag]=1;
      if(node.children!=null){

        for (var i = 0; i < node.children.length; i++) {
          printTree(node.children[i]);
        }
      }else {return;};
    }

    window.onload = function(){
      printTree(document.body);
      for (o in map) {
        console.log(o+':'+map[o]);
      }
    }
  </script>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章