javascript
初探JavaScript（一）——也谈元素节点、属性节点、文本节点
Javascript大行其道的時(shí)候，怎么能少了我來湊湊熱鬧^_^
基本上自己對(duì)于js的知識(shí)儲(chǔ)備很少，先前有用過JQuery實(shí)現(xiàn)一些簡(jiǎn)單功能，要論起JS的前世今生，來龍去脈，我就一小白。抱起一本《Javascript Dom編程藝術(shù)》，開始慢慢走近JS，與它套近乎，今天是第三天了，從目前來看，比較好相處。就此動(dòng)筆，是一個(gè)回憶復(fù)習(xí)的過程，權(quán)當(dāng)是自己的一份讀書筆記。
JavaScript一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型，已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動(dòng)態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實(shí)現(xiàn)自身的功能的。
提到了JS，就很難繞開一個(gè)概念DOM(Document Object Model 文檔對(duì)象模型)，個(gè)人對(duì)這Dom和JS的了解還不是很透徹。按照官方說法：DOM是W3C組織推薦的處理可擴(kuò)展標(biāo)志語言的標(biāo)準(zhǔn)編程接口，可以以一種獨(dú)立于平臺(tái)和語言的方式訪問和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu)。換句話說，這是表示和處理一個(gè)HTML或XML文檔的常用方法。
我的理解Dom就是能夠?qū)TML或XML這樣的文檔進(jìn)行模型化，將一個(gè)文檔轉(zhuǎn)換為一個(gè)類似樹狀結(jié)構(gòu)等如下圖所示，以便于配合JS語言進(jìn)行模型中（如HTML網(wǎng)頁）元素的添加或移除等操作。由于歷史原因，DOM應(yīng)運(yùn)而生并成為一種標(biāo)準(zhǔn)。
一些常用的方法如：
getElementById（）?：根據(jù)給定id屬性值得元素節(jié)點(diǎn)得到相對(duì)應(yīng)的對(duì)象。
如：
<td id = "name"></td>通過document.getElementById（"name"）可以得到的整個(gè)td標(biāo)記，主意這里得到的是一個(gè)對(duì)象?。
getElement?s?ByTagName（）?：根據(jù)跟定tag標(biāo)記名稱得到一個(gè)相對(duì)應(yīng)的對(duì)象數(shù)組。
如：
1 <tr> 2 3 <td>one</td> 4 5 <td>two</td> 6 7 </tr>通過document.getElementsByTagName（"td"）就得到所有標(biāo)記為td的一個(gè)?對(duì)象數(shù)組?。
getAttribute（）?：根據(jù)給定屬性名稱得到屬性值
如：
<p title="name">jackie is happy</p>通過document.getElementsByTagName("p")[0].getAttribute("title")，就可以得到name。
注意：該方法不能通過document進(jìn)行調(diào)用，只能通過一個(gè)元素節(jié)點(diǎn)對(duì)象來調(diào)用它。
setAttribute（）?：設(shè)置某一個(gè)屬性的值。
如通過document.getElementsByTagName("p")[0].setAttribute("title","hobby")，則title的屬性值就會(huì)由name變?yōu)閔obby。
另外這里介紹下困擾過我的一個(gè)簡(jiǎn)單的問題，眾所周知，Dom有三大節(jié)點(diǎn)：?元素節(jié)點(diǎn)?+?屬性節(jié)點(diǎn)?+?文本節(jié)點(diǎn)
雖然只是簡(jiǎn)單的概念，但是迫于強(qiáng)迫癥，決定要把它們區(qū)分清楚，不想在腦海中一直殘留著模糊的印象。
針對(duì)三種節(jié)點(diǎn)分別從nodeType、nodeName和nodeValue三個(gè)方面進(jìn)行區(qū)分比較：
nodeType：
元素節(jié)點(diǎn)：1
屬性節(jié)點(diǎn)：2
文本節(jié)點(diǎn)：3
對(duì)于nodeName以及nodeValue根據(jù)不同的情況值也不同，下面舉一個(gè)例子：
1.元素節(jié)點(diǎn)：
1 <HTML> 2 <HEAD> 3 <TITLE>區(qū)分nodeName和nodeValue</TITLE> 4 </HEAD> 5 <BODY> 6 <table> 7 <tr> 8 <td id="Jackie" name="myname">Jackie Z</td> 9 </tr> 10 </table> 11 <script> 12 var d = document.getElementById("Jackie"); 13 alert(d.nodeType); 14 alert(d.nodeName); 15 alert(d.nodeValue) ; 16 </script> 17 </BODY> 18 </HTML>運(yùn)行結(jié)果為：
nodeType：1
nodeName：td
nodeValue：null
2.屬性節(jié)點(diǎn)：
1 <HTML> 2 <HEAD> 3 <TITLE>區(qū)分nodeName和nodeValue</TITLE> 4 </HEAD> 5 <BODY> 6 <table> 7 <tr> 8 <td id="Jackie" name="myname">Jackie Z</td> 9 </tr> 10 </table> 11 <script> 12 var d = document.getElementById("Jackie").getAttributeNode("name"); 13 alert(d.nodeType); 14 alert(d.nodeName); 15 alert(d.nodeValue) ; 16 </script> 17 </BODY> 18 </HTML>運(yùn)行結(jié)果如下：
nodeType：2
nodeName：name
nodeValue：myname
3.文本節(jié)點(diǎn)：
1 <HTML> 2 <HEAD> 3 <TITLE>區(qū)分nodeName和nodeValue</TITLE> 4 </HEAD> 5 <BODY> 6 <table> 7 <tr> 8 <td id="Jackie" name="myname">Jackie Z</td> 9 </tr> 10 </table> 11 <script> 12 var d = documentgetElementsByTagName("td")[0].firstChild; 13 alert(d.nodeType); 14 alert(d.nodeName); 15 alert(d.nodeValue) ; 16 </script> 17 </BODY> 18 </HTML>運(yùn)行結(jié)果如下：
nodeType：3
nodeName：#text（對(duì)于所有文本節(jié)點(diǎn)nodeName都是固定的）
nodeValue：Jackie
總結(jié)
以上是生活随笔為你收集整理的初探JavaScript（一）——也谈元素节点、属性节点、文本节点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DOM中元素节点、属性节点、文本节点的理
- 下一篇： 认识DOM的三大节点：元素节点，文本节点