認識DOM的三大節點：元素節點，文本節點，屬性節點以及nodeName,nodeType,nodeValue的區別
既然我們把網頁文檔看做樹形結構，那么就有對應的節點。誠然DOM中有三大節點，分別是 元素節點，文本節點，屬性節點
元素節點：構成了DOM的基礎。文檔結構中，<html>是根元素，代表整個文檔，其他的還有<head>,<body>,<p>,<span>等等。元素節點之間可以相互包含(當然遵循一定的規則)
文本節點：包含在元素節點中。
屬性節點：元素都可以包含一些屬性，屬性的作用是對元素做出更具體的描述，比如id,name之類的。
在比較上述節點的區別之前，還需要了解nodeType,nodeName,nodeValue節點的這三個基本屬性。
1. nodeName屬性含有某個節點的名稱
對於元素節點，nodeName=標簽名（返回的名稱是大寫的）
對於文本節點，nodeName=#text
對於屬性節點，nodeName=屬性名（返回的名稱是大寫的）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script> window.onload = function() { var element = document.getElementById("span"); var text = element.firstChild; var property = document.getElementById("span").getAttributeNode("id"); alert("這是元素節點的返回值："+ element.nodeName);//返回的標簽名SPAN,注意是大寫的 alert("這是文本節點的返回值："+ text.nodeName);//返回的#text alert("這是屬性節點的返回值："+ property.nodeName);//返回的是屬性名，這里是id } </script> </head> <body> <div> <span id="span">文本節點</span> </div> </body> </html>
2. nodeValue
對於元素節點，因為本身不直接包含文本，所以nodeValue是不可用的。當然你也可以在示例中自己寫試試看有什么結果出現。
對於文本節點，nodeValue=文本值
對於屬性節點，nodeValue=屬性值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script> window.onload = function() { var element = document.getElementById("myspan"); var text = element.firstChild; var property = document.getElementById("myspan").getAttributeNode("id"); alert("這是元素節點的返回值："+ element.nodeValue);//本身就沒有意義，這里是試驗下的，返回的是null alert("這是文本節點的返回值："+ text.nodeValue);//返回的是文本值 文本節點 alert("這是屬性節點的返回值："+ property.nodeValue);//返回的是屬性值，這里是id的屬性值 myspan } </script> </head> <body> <div> <span id="myspan">文本節點</span> </div> </body> </html>
3. nodeType
對於元素節點，nodeType=1
對於文本節點，nodeType=3
對於屬性節點，nodeType=2
另外提一下：
對於注釋元素，nodeType=8
對於文檔元素，nodeType=9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script> window.onload = function() { var element = document.getElementById("myspan"); var text = element.firstChild; var property = document.getElementById("myspan").getAttributeNode("id"); alert("這是元素節點的返回值："+ element.nodeType);//元素節點返回1 alert("這是文本節點的返回值："+ text.nodeType);//文本節點返回3 alert("這是屬性節點的返回值："+ property.nodeType);//屬性節點返回2 } </script> </head> <body> <div> <span id="myspan">文本節點</span> </div> </body> </html>