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

 

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

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

 

下面看一下例子： 

 

对于文本1

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

 对于文本2

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

 

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

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

可得下列结果：

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