关于Node和Element和HTMLElement

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

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

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

下面看一下例子：

对于文本1

  
    
<div id='test'> 
    
 <p>HTMLElement</p>
    
  <asd>HTMLUnknownElemen</asd>  
    
</div> 
  

对于文本2

  
    
<div id='test'><p>HTMLElement</p>
    
  <asd>HTMLUnknownElemen</asd>  
    
</div> 
  

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

  
    
var div = document.getElementById('test');  
    
var nodeNum,elementNum;  
    
nodeNum = div.childNodes.length;  
    
elementNum = div.childElementCount;  
    
console.log('nodeNum:%d',nodeNum);  
    
console.log('elementNum:%d',elementNum);
    
console.log('firstChild:%d %d' , div.firstChild , div.firstChild.toString());
console.log('firstElement:%d %d' , div.firstElementChild ,
    
div.firstElementChild.toString());  
    
for(var i = 0;i < nodeNum;i++){  
    
   console.log(div.childNode[i].toString());  
    
} 
  

可得下列结果：

文本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>之间没有空白符）