既然我們把網頁文檔看做樹形結構，那么就有對應的節點。誠然DOM中有三大節點，分別是元素節點，文本節點，屬性節點
元素節點：構成了DOM的基礎。文檔結構中，<html>是根元素，代表整個文檔，其他的還有<head>,<body>,<p>,<span>等等。元素節點之間可以相互包含(當然遵循一定的規則)
文本節點：包含在元素節點中。
屬性節點：元素都可以包含一些屬性，屬性的作用是對元素做出更具體的描述，比如id,name之類的。
在比較上述節點的區別之前，還需要了解nodeType,nodeName,nodeValue節點的這三個基本屬性。
1.nodeName屬性含有某個節點的名稱
對于元素節點，nodeName=標簽名（返回的名稱是大寫的）
對于文本節點，nodeName=#text
對于屬性節點，nodeName=屬性名（返回的名稱是大寫的）
[html]?view plaincopy print?
<span?style="font-family:KaiTi_GB2312;font-size:24px;"><!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></span>??
2.nodeValue
對于元素節點，因為本身不直接包含文本，所以nodeValue是不可用的。當然你也可以在示例中自己寫試試看有什么結果出現。
對于文本節點，nodeValue=文本值
對于屬性節點，nodeValue=屬性值
[html]?view plaincopy print?
<span?style="font-family:KaiTi_GB2312;font-size:24px;"><!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></span>??
3.nodeType
對于元素節點，nodeType=1
對于文本節點，nodeType=3
對于屬性節點，nodeType=2
另外提一下：
對于注釋元素，nodeType=8
對于文檔元素，nodeType=9
[html]?view plaincopy print?
<span?style="font-family:KaiTi_GB2312;"><!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></span>??
總結
以上是生活随笔為你收集整理的认识DOM的三大节点：元素节点，文本节点，属性节点以及nodeName,nodeType,nodeValue的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
