首頁 > 開發者 > 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標記，主意這裡得到的是一個對象。
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
本文連結：《初探JavaScript（一）——也談元素節點、屬性節點、文本節點》
如果對你有用，歡迎點贊哦，也歡迎加群討論。
初探JavaScript（一）——也談元素節點、屬性節點、文本節點
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
