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