Node节点对象代表文档树中的一个单独的节点。

Element 对象表示 XML 文档中的元素。元素可包含属性、其他元素或文本。如果元素含有文本，则在文本节点中表示该文本。

HTMLElement 对象表示 HTML 中的一个元素。所以下列例子中即使是HTMLUnknownElement的标签asd的节点也属于HTMLElement对象。

下面看一下例子：

对于文本1

 
 
    
  
  
  1. <div id='test'> 
    2. 
  
  
  2.  <p>HTMLElement</p>
    3. 
  
  
  3.   <asd>HTMLUnknownElemen</asd>  
    4. 
  
  
  4. </div> 
    5.

对于文本2

 
 
    
  
  
  1. <div id='test'><p>HTMLElement</p>
    2. 
  
  
  2.   <asd>HTMLUnknownElemen</asd>  
    3. 
  
  
  3. </div> 
    4.

对文本1,文本2均执行以下脚本

 
 
    
  
  
  1. var div = document.getElementById('test');  
    2. 
  
  
  2. var nodeNum,elementNum;  
    3. 
  
  
  3. nodeNum = div.childNodes.length;  
    4. 
  
  
  4. elementNum = div.childElementCount;  
    5. 
  
  
  5. console.log('nodeNum:%d',nodeNum);  
    6. 
  
  
  6. console.log('elementNum:%d',elementNum);
    7. 
  
  
  7. console.log('firstChild:%d %d' , div.firstChild , div.firstChild.toString());
    console.log('firstElement:%d %d' , div.firstElementChild ,
    8. 
  
  
  8. div.firstElementChild.toString());  
    9. 
  
  
  9. for(var i = 0;i < nodeNum;i++){  
    10. 
  
  
  10.    console.log(div.childNode[i].toString());  
    11. 
  
  
  11. } 
    12.

可得下列结果：

文本1结果：

nodeNum:5

elementNum:2

firstChild:#text [object Text]

firstElement:p [object HTMLParagraphElement]

[object Text]

[object HTMLParagraphElement ]

[object Text]

[object HTMLUnknownElement]

[object Text]

也就是说该节点下有5个node，2个element。

第一个node内容是#text（每个标签之间的空白符都被转换成了Text节点），node的类型是Text。

第一个element内容是p，node的类型是HTMLParagraphElement（扩展自HTMLElement（扩展自Element））

文本2结果：

nodeNum:4

elementNum:2

firstChild:#text [object Text]

firstElement:p [object HTMLParagraphElement]

[object HTMLParagraphElement ]

[object Text]

[object HTMLUnknownElement]

[object Text]

也就是说该节点下有4个node，2个element。

第一个element和node都是 内容是p，node的类型是HTMLParagraphElement。（因为<p>与<div>之间没有空白符）