結構和內容屬性
nodeType
所有的節點都有類型，節點總共有以下的12種類型。
復制代碼 代碼如下:
interface Node {
// NodeType
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
...
}
其中最重要的兩個節點為元素節點（1）和文本節點（3）。其余的很少會用到。
例如，列出所有的子元素節點時，我們可以遍歷它，並使用childNodes[i].nodeType != 1來進行檢測。
下面是實現代碼：
復制代碼 代碼如下:
<body>
<div>Allowed readers:</div>
<ul>
<li>John</li>
<li>Bob</li>
</ul>
<!-- a comment node -->
<script>
var childNodes = document.body.childNodes
for(var i=0; i<childNodes.length; i++) {
if (childNodes[i].nodeType != 1) continue
alert(childNodes[i])
}
</script>
</body>
*思考
下面這段代碼將提示什麼內容：
復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<body>
<script>
alert(document.body.lastChild.nodeType)
</script>
</body>
</html>
nodeName, tagName
nodeName 和 tagName 都包含節點的名稱。
對於document.body來說
alert( document.body.nodeName ) // BODY
在HTML中所有的nodeName會被大寫。
當nodeName沒有被大寫時
這種情況比較稀有，你如果好奇的話可以閱讀以下。
你很可能已經知道，浏覽器有兩種方式進行解析:HTML模式和__XML模式。通常使用的是HTML模式，但是當使用XMLHttpRequest__技術獲取XML文檔時，會使用XML模式。
在火狐浏覽器中當XHTML文檔的Content-Type設置為xmlish時也會使用XML模式。
在__XML模式中節點名將會保留，所以有可能出現body或bOdY。
因此，如果通過XMLHttpRequest__技術從服務器載入XML到HTML文檔時，節點名稱將會保留。
對於元素來說nodeName和__tagName__是相同的。
但非元素節點也存在著nodeName屬性，在這些節點中它有特殊的值：
alert(document.nodeName) // #document
大多數節點類型都沒有tagName屬性，並且在IE中注釋節點的tagName為!。
因此，通常來講nodeName 跟 tagName 比起來更有意義一些。但tagName像是簡化版本，因此，當你只處理元素節點時，你可以使用它。
innerHTML
innerHTML是HTML5標准的一部分，詳細請看鏈接
它允許以文本的方式訪問節點內容。下例將會輸出document.body的所有的內容並且用新的內容進行替換。
復制代碼 代碼如下:
<body>
<p>The paragraph</p>
<div>And a div</div>
<script>
alert( document.body.innerHTML ) // read current contents
document.body.innerHTML = 'Yaaahooo!' // replace contents
</script>
</body>
innerHTML會包含一個有效地HTML。但浏覽器也可以解析畸形的HTML。
innerHTML可以在任意一個元素節點中進行使用。它非常非常有用。
innerHTML pitFalls
innerHTML不像看起來那麼簡單。它有一些陷阱在正等待著菜鳥們，甚至有些時候經驗豐富的程序員也無法避免。
IE中__table__節點的innerHTML為只讀的
IE中COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR等元素裡innerHTML為只讀的。
IE中的table標簽中除了TD其余的標簽innerHTML都是只讀的。
innerHTML不能追加
從語句的構成上來看innerHTML可以進行追加操作，比如:
chatDiv.innerHTML += "<div>Hi <img src='smile.gif'/> !</div>"
chatDiv.innerHTML += "How you doing?"
但是實際上都做了些什麼:
1. 舊的內容被清空
2. 新的內容被解析，並插入了進去。內容沒有被追加，它重新生成了。
因此，所有的圖片和其他的資源當進行+=操作後會重新載入，包括smile.gif。
幸運的是，有其他的方式來更新內容，這種方式不使用innerHTML，因此沒有上面提到的問題。
nodeValue
innerHTML只對元素節點有效。
對於其他類型的節點來說，他們使用nodeValue屬性來獲取內容。下例將說明它是如何在文本節點和注釋節點工作的。
復制代碼 代碼如下:
<body>
The text
<!-- A comment -->
<script>
for(var i=0; i<document.body.childNodes.length; i++) {
alert(document.body.childNodes[i].nodeValue)
}
</script>
</body>
上面的例子中，有些警告為空的，那是因為空白節點的緣故。注意到對於SCRIPT節點中nodeValue === null。那是因為SCRIPT為元素節點。元素節點，要使用innerHTML。
總結
nodeType
節點類型。最重要的是元素節點為1，文本節點為3，只讀。
nodeName/tagName
大寫的標簽名。非元素節點來說nodeName還會有特殊的值，只讀。
innerHTML
元素節點的內容，可寫。
nodeValue
文本節點的內容，可寫。
DOM節點根據類型，還有其他的一些屬性。例如，INPUT標簽有value和__checked__屬性。A屬性有href等等。
以上就是本文的全部內容了，希望大家能夠喜歡。