關於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>之間沒有空白符）