DOM节点类型

文档中12种不同的节点类型：

注意：DocumentType、Comment、Text、CDATASection和Notation没有子节点。

节点的基本属性（在这里只写三个）：

1.nodeType属性(返回节点的属性值)

<div id="box"><h2>4</h2><!-- 注释 -->hello</div>
     <script type="text/javascript">
     window.onload=function(){
          var obox=document.getElementById("box");
          for (var i = 0; i < obox.childNodes.length; i++) {
               console.log("nodeType:"+obox.childNodes[i].nodeType+"");                                 
          }  
           console.log(obox.childNodes[0].ELEMENT_NODE === 1);//true
           console.log(obox.childNodes[1].COMMENT_NODE === 8);//true
           console.log(obox.childNodes[2].TEXT_NODE === 3);//true  
     }

2.nodeName属性（返回节点的名称）

<div id="box"><h2>4</h2><!-- 注释 -->hello</div>
     <script type="text/javascript">
     window.onload=function(){
          var obox=document.getElementById("box");
          for (var i = 0; i < obox.childNodes.length; i++) {    
               console.log("nodeName:"+obox.childNodes[i].nodeName+"");                    
          } 
     }
     </script>

3.nodeValue属性（返回或设置当前节点的值，格式为字符串）

 <div id="box"><h2>4</h2><!-- 注释 -->hello</div>
     <script type="text/javascript">
     window.onload=function(){
          var obox=document.getElementById("box");
          for (var i = 0; i < obox.childNodes.length; i++) {
                console.log("nodeValue:"+obox.childNodes[i].nodeValue+"");
          } 
     }
     </script>

注意1：obox.childNodes返回的是id为box盒子里所有的节点（obox下的第一级child节点）

      这里只有三个，（H2、注释、hello）,就算H2里面还有其他节点。

注意2：空格和换行符会被解释成节点

<div id="box">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
</div>
     <script type="text/javascript">
         var obox=document.getElementById("box");
         console.log(obox.childNodes.length); //9                       
     </script>

一开始我也以为长度会是4，但是每个p标签前后都是有空格（5个）的。

 console.log(obox.childNodes[0].nodeType);//3 
 console.log(obox.childNodes[0].nodeName);//#text

最后如果只想要返回元素节点的长度可以用：
ele.childElementCount 方法或者 ele.children.length方法