目錄
本篇主要介紹DOM操作，在說DOM操作之前，首先我們應該熟悉DOM樹，以一個例子為例來說明DOM樹。首先看這段HTML代碼.(本文后面的代碼如果沒有特別指出，都是針對下述HTML代碼進行操作)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>愛好</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 </head> 7 <body> 8 <p title="你最喜歡的運動">你最喜歡的運動是什么呢</p> 9 <ul> 10 <li title="籃球">籃球</li> 11 <li title="足球">足球</li> 12 <li title="羽毛球">羽毛球</li> 13 14 </ul> 15 </body> 16 </html>
其DOM結構如圖1 所示。
圖1
圖一就是該HTML代碼的一顆DOM數。對DOM的各種操作事實上都是對這顆DOM樹展開的。
在掌握各種DOM操作之前，首先需要了解DOM操作的分類。
一. DOM操作的分類
1. DOM Core
DOM Core 可以處理任何一種使用標簽的語音，不只是HTML，還有XML等等。在JS中我們常用到的getElementById()、getElementByTagName()、getAttribute()、setAttribute()等方法都屬於DOM Core中的核心方法。
2. HTML-DOM
一般而言，HTML-DOM只是用於處理Web文檔。
3.CSS-DOM
CSS-DOM主要用於獲取和設置style對象的各種屬性。
二.jQuery中的各種DOM操作
jQuery作為js的一種類庫，不僅繼承了DOM的一些操作，更加發揚了DOM操作，使其對DOM操作更加的靈活。
1. 查找節點
主要是通過jQuery選擇器來完成。結合文章開頭的DOM樹實例就行說明。
1.1查找元素節點
以上述DOM樹為例，來說明如何執行查找元素節點，執行下述代碼就可打印出“籃球”。
1 var $li=$("ul li:eq(0)"); //查找ul中第一個<li> 2 alert($li.text()); //打印出第一個節點中的文本內容
1.2 查找屬性節點
通過使用attr()獲取屬性的值，參數可以為多個。執行下述代碼就會彈出“你最喜歡的運動”.
var $p=$("p"); //獲取節點<p>
var p_text=$p.attr("title"); //獲取節點<p>的屬性title的值
alert(p_text); //打印title的值
2. 創建節點
很多時候，我們不僅僅是要查找節點，還需要創建節點，例如我們在瀏覽淘寶網店的時候，當鼠標放到一幅圖片上的時候，鼠標旁馬上就會有一張更大的圖片來顯示，其實這張大的圖片就是開辟了一個新的<div>區域，或者更准確的來說是創建了一個新的節點掛在了DOM樹上。
2.1 創建元素節點
創建元素節點並不只是單單創建元素節點，還需要將其掛到DOM樹上。例如我們創建一個<li>節點然后將其掛在<ul>上，具體代碼如下：
var $li_new=$("<li></li>"); //創建一個<li>元素
$("ul").append($li_new); //將其添加到<ul>下
2.2 創建文本節點
剛才只是創建了一個節點，並沒有先該節點中添加任何文本內容，如果我們要創建文本節點，只需要向剛才的元素節點中添加文本內容就行。具體代碼如下：
var $li_new=$("<li>乒乓球</li>"); //創建一個文本節點，文本內容為乒乓球
$("ul")。append($li_new); //將其掛在<ul>上
此時HTML顯示如圖2所示
3.3 創建屬性節點
與創建文本節點相似，也是在創建元素節點時候一起創建。如下行代碼。
1 var $li_new1=$("<li title="羽毛球">羽毛球</li>");//創建屬性節點
2 $("ul").append($li_new1); //將該屬性節點掛在<ul>上
可見，title屬性在隨着<li>節點創建的時候也一起創建了。
3. 插入節點
從上面的例子可以看出一種插入節點的方法是通過jQuery中的append()方法，下面通過表1將插入節點的各種方法進行總結。
表1 插入節點的各種方法
| 方法 | 描述 | 示例 |
| append() | 向每個匹配元素內部追加節點或是內容 | HTML代碼：<p>你好嗎?</p> jQuery代碼：$("p").append(“<b>還不錯哦.</b>”); 結果：<p>你好嗎？<b>還不錯哦.</b></p> |
| appendTo() | $(A).append(B):是將B追加到A上 $(A).appendTo(B):是將A追加到B上 |
HTML代碼：<p>你好嗎?</p> jQuery代碼：$("<b>還不錯哦.</b>").appendTo(“p”); 結果：<p>你好嗎？<b>還不錯哦.</b></p> |
| prepend() | 向每個匹配的元素內部追加內容 | HTML代碼：<p>你好嗎?</p> jQuery代碼：$("p").prepend(“<b>還不錯哦.</b>”); 結果：<p><b>還不錯哦.</b>你好嗎？</p> |
| prependTo() | $(A).prepend(B):是將B追加到A上 $(A).prependTo(B):是將A追加到B上 |
HTML代碼：<p>你好嗎?</p> jQuery代碼：$("<b>還不錯哦.</b>").aprependTo(“p”); 結果：<p><b>還不錯哦.</b>你好嗎？</p> |
| after() | 在每個匹配的元素之后添加內容 | HTML代碼：<p>你好嗎?</p> jQuery代碼：$("p").after(“<b>還不錯哦.</b>”); 結果：<p>你好嗎？</p><b>還不錯哦.</b> |
| insertAfter | $(A).after(B):將B插入到A后 $(A).insertAfter(B):將A插入到B后 |
HTML代碼：<p>你好嗎?</p> jQuery代碼：$(“<b>還不錯哦.</b>”).insertAfter(“p”); 結果：<p>你好嗎？</p><b>還不錯哦.</b> |
| before() | 在每個匹配元素之前插入內容 | HTML代碼：<p>你好嗎?</p> jQuery代碼：$(“p”).before(“<b>還不錯哦.</b>”); 結果：<b>還不錯哦.</b><p>你好嗎？</p> |
| insertBefore() | $(A).before(B):將B插入到A前 $(A).insertBefore(B):A插入到B前 |
HTML代碼：<p>你好嗎?</p> jQuery代碼：$(“<b>還不錯哦.</b>”).insertBefore(“p”); 結果：<b>還不錯哦.</b><p>你好嗎？</p> |
4. 刪除節點
jQuery中提供了三種方法刪除多余的節點。分別是remove()、detach()、empty()。下面一一介紹。
4.1 remove()方法
$("ul li:eq(0)").remove(); //獲取ul下的第一個<li>節點后，刪除該節點
值得注意的有兩點：1.經remove()方法刪除后的節點還可以恢復， 例如上述代碼被刪除后可以通過以下代碼恢復
1 var $li_delete=$("ul li:eq(0)"); //獲得ul下第一個li節點 2 $li_delete.remove(); //將該節點刪除 3 $("ul").append($li_delete); //在將被刪除的節點添加到ul上，需要注意的是此時該li節點被放置到ul的最后面
但是這種恢復節點，該節點上所綁定的事件將不會恢復。
2.remove()可以帶參數，例如一下這行代碼
1 $("ul li").remove(“li[title=籃球]”); //在<ul>下，刪除屬性title為籃球的li的節點
4.2 detach()方法
具體用法與remove方法基本一樣。與remove()方法相同的是該方法在刪除元素節點后，也可以恢復元素。與remove()方法不同的是該方法刪除所匹配的元素時，並不會刪除該元素所綁定的事件、附加的數據，比如說：一個<p>綁定了一個click(function(){ alert("能恢復嗎？");});事件，如果用remove()刪除之后，再次恢復該元素時候並不會恢復click()事件，而detach()方法則在恢復時，同時也可以恢復其click()事件。
4.3empty()方法
准確的說，empty()方法並不是刪除節點，而是清空節點，清空元素中的所有后代節點。最后只剩一個空節點（該元素的屬性依然存在）。例如我們清空第三個羽毛球的<li>節點。可以用下述代碼完成。
1 $("ul li:eq(2)").empty; //清空該節點
清空后HTML頁變為圖3所示。
圖3
該圖說明只是清空節點，並沒有情況該節點所對應的屬性。
5. 復制節點
通過使用clone()方法，值得注意的是：如果只寫clone()則表示說明只復制節點，復制節點后，被復制的新元素並不具有任何行為，如何想復制原節點所綁定的行為（事件）,那么寫法應該為clone(true).
6.替換節點
兩個方法replaceWith()與replaceAll()： $(A).replaceWith(B)：用B替換A
$(A).replaceAll(B)：用A替換B
7. 包裹節點
jQuery提供的方法是wrap().參考下行示例代碼。
$("p").wrap(""<b></b>""); 用<b>標簽將<p>包裹起來
8. 屬性操作
1. 獲取屬性和設置屬性
通過attr()方法。
2. 刪除屬性
通過removeAttr();如下例代碼。
1 $("p").removeAttr("title"); //刪除<p>的title屬性
9. 樣式操作
1.獲取樣式和設置樣式
我們知道，在HTML中改變樣式的方法是通過CSS來完成的，一般都通過在元素中定義id或者class，而id或者class也輸入該元素的一個屬性，故可以通過attr()方法來獲取和設置其屬性。例如<p>標簽中原始屬性是class=start，在CSS中又定義了一個end的樣式。這時我們就可以通過以下代碼進行設置樣式。
1 $("p").attr("class",“end”); //將<p>標簽的樣式class從start該為end
2. 追加樣式
通過jQuery中提供的addClass()方法進行追加樣式，值得注意的是addClass()是該原先的樣式中添加了一種新的樣式(多了一種樣式,如果以前樣式是一種則使用該方法后樣式變為兩種)，而attr()則是該變了元素的初始樣式(樣式沒有增多)。
3. 移除樣式
通過jQuery中的removeClass()方法。如果參數為空，則代表是移除其所有的樣式。
4. 切換樣式
通過使用jQuery中的toggle()方法，該方法在jQuery中有着廣泛的應用，以后要出一篇blog要把常用的jQuery方法進行總結。這里只說toggle()方法應該如何切換樣式。實際上，通過的是tooggleClass()方法進行切換。該方法可以控制樣式的重復切換，如果類名存在就刪除它，如果類名不存在就添加它。示例代碼如下。
1 $("p").tooggleClass("another"); //重復切換類名anohter
5. 判斷是否含有某個樣式
通過hasClass()方法進行判斷，如果有則返回true，沒有返回false。
10. 設置和獲取HTML、文本、值
1. html()方法
該方法類似於javascript中的innerHTML屬性，獲取的是HTML代碼。
2.text()方法
該方法類似於javascript中的innerText屬性，獲取的是文本內容。
3.val()方法
該方法類似與javascript中的value屬性，獲取或者設置元素的值。需要注意的是，如果獲取的是多個元素，那么返回值也將是含多個元素值的集合。
11. 遍歷節點
1. children()方法
children()方法只考慮子元素，而不考慮后代元素。我們重點關注下該方法。首先我們還是回顧下blog開頭的DOM樹。然后在看下述代碼。
1 var $body=$("body").children(); 2 var $p=$("p").children(); 3 var $ul=$("ul").children(); 4 alert($body.length); //結果為2 5 alert($p.length); //結果為0 6 alert($ul.length); //結果為3
如果要遍歷li元素，我們則可以通過一個for循環進行遍歷。在返回的結果也可以看出children()方法並沒有考慮后代元素。
2.next()方法
獲得匹配元素后面緊鄰的同輩元素。
3. prev()方法
獲得匹配元素前面緊鄰的同輩元素。
4.siblings()方法
取得匹配元素前后所有的同輩元素。
12. CSS-DOM操作
該技術一句話來說就是控制sytle對象的各種屬性。如果我們要設置blog開頭DOM樹中的<p>的樣式，我們可以通過以下代碼就行設置。
1 $("p").css({"color":"red","font-size":"14px"}); //設置<p>的顏色和字體
小結
對DOM的操作就先寫到這里吧，這篇博客也是對上一篇博客中的jQuery選擇器的一種實際應用，jQuery中的對DOM操作應是jQuery的核心部分之一。掌握好DOM操作之后才能把jQuery中的事件、動畫、表單表格應用甚至是AJAX才能充分利用好。