Javascript大行其道的時候，怎么能少了我來湊湊熱鬧^_^
基本上自己對於js的知識儲備很少，先前有用過JQuery實現一些簡單功能，要論起JS的前世今生，來龍去脈，我就一小白。抱起一本《Javascript Dom編程藝術》，開始慢慢走近JS，與它套近乎，今天是第三天了，從目前來看，比較好相處。就此動筆，是一個回憶復習的過程，權當是自己的一份讀書筆記。
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型，已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
提到了JS，就很難繞開一個概念DOM(Document Object Model 文檔對象模型)，個人對這Dom和JS的了解還不是很透徹。按照官方說法：DOM是W3C組織推薦的處理可擴展標志語言的標准編程接口，可以以一種獨立於平台和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。
我的理解Dom就是能夠將HTML或XML這樣的文檔進行模型化，將一個文檔轉換為一個類似樹狀結構等如下圖所示，以便於配合JS語言進行模型中（如HTML網頁）元素的添加或移除等操作。由於歷史原因，DOM應運而生並成為一種標准。
一些常用的方法如：
getElementById（）：根據給定id屬性值得元素節點得到相對應的對象。
如：
<td id = "name"></td>
通過document.getElementById（"name"）可以得到的整個td標記，主意這里得到的是一個對象。
getElementsByTagName（）：根據跟定tag標記名稱得到一個相對應的對象數組。
如：
1 <tr> 2 3 <td>one</td> 4 5 <td>two</td> 6 7 </tr>
通過document.getElementsByTagName（"td"）就得到所有標記為td的一個對象數組。
getAttribute（）：根據給定屬性名稱得到屬性值
如：
<p title="name">jackie is happy</p>
通過document.getElementsByTagName("p")[0].getAttribute("title")，就可以得到name。
注意：該方法不能通過document進行調用，只能通過一個元素節點對象來調用它。
setAttribute（）：設置某一個屬性的值。
如通過document.getElementsByTagName("p")[0].setAttribute("title","hobby")，則title的屬性值就會由name變為hobby。
另外這里介紹下困擾過我的一個簡單的問題，眾所周知，Dom有三大節點：元素節點+屬性節點+文本節點
雖然只是簡單的概念，但是迫於強迫症，決定要把它們區分清楚，不想在腦海中一直殘留着模糊的印象。
針對三種節點分別從nodeType、nodeName和nodeValue三個方面進行區分比較：
nodeType：
元素節點：1
屬性節點：2
文本節點：3
對於nodeName以及nodeValue根據不同的情況值也不同，下面舉一個例子：
1.元素節點：
1 <HTML> 2 <HEAD> 3 <TITLE>區分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>
運行結果為：
nodeType：1
nodeName：td
nodeValue：null
2.屬性節點：
1 <HTML> 2 <HEAD> 3 <TITLE>區分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>
運行結果如下：
nodeType：2
nodeName：name
nodeValue：myname
3.文本節點：
1 <HTML> 2 <HEAD> 3 <TITLE>區分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>
運行結果如下：
nodeType：3
nodeName：#text（對於所有文本節點nodeName都是固定的）
nodeValue：Jackie Z
本文鏈接：《初探JavaScript（一）——也談元素節點、屬性節點、文本節點》
如果對你有用，歡迎點贊哦，也歡迎加群討論。
友情贊助
如果你覺得博主的文章對你那么一點小幫助，恰巧你又有想打賞博主的小沖動，那么事不宜遲，趕緊掃一掃，小額地贊助下，攢個奶粉錢，也是讓博主有動力繼續努力，寫出更好的文章^^。
1. 支付寶 2. 微信
