javascript
初探JavaScript（一）——也谈元素节点、属性节点、文本节点
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標記，主意這里得到的是一個對象?。
getElement?s?ByTagName（）?：根據跟定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
總結
以上是生活随笔為你收集整理的初探JavaScript（一）——也谈元素节点、属性节点、文本节点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DOM中元素节点、属性节点、文本节点的理
- 下一篇： gradle idea java ssm