既然我們把網(wǎng)頁(yè)文檔看做樹形結(jié)構(gòu)，那么就有對(duì)應(yīng)的節(jié)點(diǎn)。誠(chéng)然DOM中有三大節(jié)點(diǎn)，分別是元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，屬性節(jié)點(diǎn)
元素節(jié)點(diǎn)：構(gòu)成了DOM的基礎(chǔ)。文檔結(jié)構(gòu)中，<html>是根元素，代表整個(gè)文檔，其他的還有<head>,<body>,<p>,<span>等等。元素節(jié)點(diǎn)之間可以相互包含(當(dāng)然遵循一定的規(guī)則)
文本節(jié)點(diǎn)：包含在元素節(jié)點(diǎn)中。
屬性節(jié)點(diǎn)：元素都可以包含一些屬性，屬性的作用是對(duì)元素做出更具體的描述，比如id,name之類的。
在比較上述節(jié)點(diǎn)的區(qū)別之前，還需要了解nodeType,nodeName,nodeValue節(jié)點(diǎn)的這三個(gè)基本屬性。
1.nodeName屬性含有某個(gè)節(jié)點(diǎn)的名稱
對(duì)于元素節(jié)點(diǎn)，nodeName=標(biāo)簽名（返回的名稱是大寫的）
對(duì)于文本節(jié)點(diǎn)，nodeName=#text
對(duì)于屬性節(jié)點(diǎn)，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>無(wú)標(biāo)題文檔</title>?? <script>?? window.onload?=?function()?? {?? ????var?element?=?document.getElementById("span");?? ????var?text?=?element.firstChild;?? ????var?property?=?document.getElementById("span").getAttributeNode("id");?? ????alert("這是元素節(jié)點(diǎn)的返回值："+?element.nodeName);//返回的標(biāo)簽名SPAN,注意是大寫的?? ????alert("這是文本節(jié)點(diǎn)的返回值："+?text.nodeName);//返回的#text?? ????alert("這是屬性節(jié)點(diǎn)的返回值："+?property.nodeName);//返回的是屬性名，這里是id?? }?? </script>?? </head>?? <body>?? <div>?? <span?id="span">文本節(jié)點(diǎn)</span>?? </div>?? </body>?? </html></span>??
2.nodeValue
對(duì)于元素節(jié)點(diǎn)，因?yàn)楸旧聿恢苯影谋?#xff0c;所以nodeValue是不可用的。當(dāng)然你也可以在示例中自己寫試試看有什么結(jié)果出現(xiàn)。
對(duì)于文本節(jié)點(diǎn)，nodeValue=文本值
對(duì)于屬性節(jié)點(diǎn)，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>無(wú)標(biāo)題文檔</title>?? <script>?? window.onload?=?function()?? {?? ????var?element?=?document.getElementById("myspan");?? ????var?text?=?element.firstChild;?? ????var?property?=?document.getElementById("myspan").getAttributeNode("id");?? ????alert("這是元素節(jié)點(diǎn)的返回值："+?element.nodeValue);//本身就沒有意義，這里是試驗(yàn)下的，返回的是null?? ????alert("這是文本節(jié)點(diǎn)的返回值："+?text.nodeValue);//返回的是文本值??文本節(jié)點(diǎn)?? ????alert("這是屬性節(jié)點(diǎn)的返回值："+?property.nodeValue);//返回的是屬性值，這里是id的屬性值??myspan?? }?? </script>?? </head>?? <body>?? <div>?? <span?id="myspan">文本節(jié)點(diǎn)</span>?? </div>?? </body>?? </html></span>??
3.nodeType
對(duì)于元素節(jié)點(diǎn)，nodeType=1
對(duì)于文本節(jié)點(diǎn)，nodeType=3
對(duì)于屬性節(jié)點(diǎn)，nodeType=2
另外提一下：
對(duì)于注釋元素，nodeType=8
對(duì)于文檔元素，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>無(wú)標(biāo)題文檔</title>?? <script>?? window.onload?=?function()?? {?? ????var?element?=?document.getElementById("myspan");?? ????var?text?=?element.firstChild;?? ????var?property?=?document.getElementById("myspan").getAttributeNode("id");?? ????alert("這是元素節(jié)點(diǎn)的返回值："+?element.nodeType);//元素節(jié)點(diǎn)返回1?? ????alert("這是文本節(jié)點(diǎn)的返回值："+?text.nodeType);//文本節(jié)點(diǎn)返回3?? ????alert("這是屬性節(jié)點(diǎn)的返回值："+?property.nodeType);//屬性節(jié)點(diǎn)返回2?? }?? </script>?? </head>?? <body>?? <div>?? <span?id="myspan">文本節(jié)點(diǎn)</span>?? </div>?? </body>?? </html></span>??
總結(jié)
以上是生活随笔為你收集整理的认识DOM的三大节点：元素节点，文本节点，属性节点以及nodeName,nodeType,nodeValue的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
