一、什么是DOM？

   DOM:(Document Object Model) 意思是文檔對(duì)象模型，根據(jù)W3C DOM規(guī)范，DOM是一種與瀏覽器、平臺(tái)、語(yǔ)言無(wú)關(guān)的接口，使用該接口可以輕松的訪問(wèn)頁(yè)面中所有的標(biāo)準(zhǔn)組件。一般來(lái)說(shuō)DOM操作分為3類：DOM core、HTML-DOM、CSS-DOM.

   我們先看下面這張DOM結(jié)構(gòu)圖：你們可以根據(jù)這個(gè)DOM結(jié)構(gòu)圖構(gòu)建出網(wǎng)頁(yè)來(lái)嗎?其中的每個(gè)灰色背景都是一個(gè)節(jié)點(diǎn)。我們可以通過(guò)不同的選擇器來(lái)獲取他們。

    二、DOM操作

     1、創(chuàng)建節(jié)點(diǎn)：在DOM操作中常常需要?jiǎng)討B(tài)的創(chuàng)建HTML內(nèi)容，使文檔在瀏覽器里的呈現(xiàn)效果發(fā)生變化。節(jié)點(diǎn)又分為元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)。

      怎么動(dòng)態(tài)創(chuàng)建節(jié)點(diǎn)呢？  例如我創(chuàng)建兩個(gè) <li>元素，可以使用jquery的工廠函數(shù)$()來(lái)完成。var $li1 = $("<li title='香蕉'>香蕉</li>"); var $li2 = $("<li title='蘋果'>蘋果</li>"). 上面的title='香蕉'就是創(chuàng)建的屬性節(jié)點(diǎn)，括在<li>元素里的香蕉文字就是文本節(jié)點(diǎn)。注意：動(dòng)態(tài)創(chuàng)建的元素不會(huì)自動(dòng)被添加到文檔中，必須使用其他方法將他插入文檔中。慢慢來(lái)，不急。

     2、插入節(jié)點(diǎn)：如果你不講新建的元素插入文檔中，動(dòng)態(tài)的創(chuàng)建HTML元素并沒(méi)有實(shí)際的用處。而JQuery提供了幾種插入節(jié)點(diǎn)的方法。下面表中的前面四個(gè)是插入到元素的內(nèi)部，而后面四個(gè)是插入到元素的外部。

     3、刪除節(jié)點(diǎn)：如果文檔中的某一個(gè)元素多余，那么我們就應(yīng)該講他刪除。這里有兩種方法：empty(); remove();懂英文的都知道這兩個(gè)單詞的意思吧，它們之間是有區(qū)別的，一個(gè)是清空，一個(gè)是移除掉。

          remove()是指移除所有的匹配元素，當(dāng)某個(gè)節(jié)點(diǎn)用了remove()方法后，該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)都會(huì)被移除文檔。這個(gè)方法的返回值指向的是已被刪除節(jié)點(diǎn)的引用，以后是可以繼續(xù)使用這些元素。

          empty()方法并不是刪除節(jié)點(diǎn)，只是將它清空而已，同時(shí)它也能清空該元素的所有后代節(jié)點(diǎn)。清空并不代表從文檔中移除哈，它的元素節(jié)點(diǎn)還是存在文檔流中，只是它里面的所有內(nèi)容不見了。

     4、屬性操作：用attr()既可以獲取元素的屬性同時(shí)還可以設(shè)置屬性。$(".test").attr("title"); $(".test").attr("title","this is my title").設(shè)置多個(gè)屬性：$("p").attr("title":"mytitle","class":"test")。用removeAttr()可以刪除某個(gè)元素特定的屬性 $("p").removeAttr("title")。

     5、樣式操作：當(dāng)然是css樣式，它的接口就是元素的class名。

        (1)怎樣獲取樣式：可以通過(guò)attr()獲取class類名和設(shè)置類名，然后在css進(jìn)行操作。一般用這種方法呢會(huì)將原來(lái)的類名替換為新設(shè)置的類名，而并不是在原來(lái)的基礎(chǔ)上添加新的類名。

        (2)追加樣式：Jquery提供了專門的addClass()來(lái)追加新的類名，用這種方法就是原來(lái)的類名和新追加的類名會(huì)同時(shí)存在的。但是不同的類名設(shè)置了同一樣的樣式，則后者會(huì)覆蓋前者。

        (3)移除樣式:與addClass()相反，removeClass()就是專門用來(lái)刪除匹配的類名的。例如：$("p").removeClass("high anther")刪除了high類名和anther類名。中間是空格符號(hào)。如果$("p").removeClass();就是刪除p元素所有的類名。

     二、容易混淆的html(),text(),value()

       1、html()方法：它類似于javascript的innerHTML屬性，可以用來(lái)讀取或者獲取某個(gè)元素的html內(nèi)容；html()方法可以運(yùn)用在XHTML方法中但是不能用在XML中。

<div><strong>這個(gè)是文本內(nèi)容哈</strong></div>
var div_html = $("div").html();
alert(div_html);
獲取的結(jié)果是：<strong>這個(gè)是文本內(nèi)容哈</strong>

        如果選擇器同時(shí)選中多于一個(gè)元素的時(shí)候，那么只能讀取第一個(gè)元素的內(nèi)容。

<div>
<p>這個(gè)是文本內(nèi)容1<a href="#">超鏈接1</a></p>
<p>這個(gè)是文本內(nèi)容2<a href="#">超鏈接2</a></p>
</div>
var p_html = $("div p").html();
alert(p_html);
獲取的結(jié)果是: 這個(gè)是文本內(nèi)容1<a href="#">超鏈接1</a>

      html()不僅可以讀取內(nèi)容還可設(shè)置內(nèi)容，但是和上面不同的事，如果選擇器同時(shí)選中多于一個(gè)元素的時(shí)候，那么被選中的的所有元素里面的html結(jié)構(gòu)都將被改變。

<div>
<p>這個(gè)是文本內(nèi)容1<a href="#">超鏈接1</a></p>
<p>這個(gè)是文本內(nèi)容2<a href="#">超鏈接2</a></p>
</div>
var p_html = $("div p").html("<h2>新加的標(biāo)題</h2><a>沒(méi)內(nèi)容</a>)");
獲取結(jié)果是：
<div>
<p><h2>新加的標(biāo)題</h2><a>沒(méi)內(nèi)容</a></p>
<p><h2>新加的標(biāo)題</h2><a>沒(méi)內(nèi)容</a></p>
</div>

       2、text()方法：它類似于javascript的innerText屬性，可以用來(lái)讀取或者設(shè)置某個(gè)元素的純文本內(nèi)容。但是innerText()方法不能在firefox下運(yùn)行，而jquery的text()方法可以在所有的瀏覽器運(yùn)行。

<p>這個(gè)是文本內(nèi)容1<a href="#">超鏈接1</a></p>
var p_html = $("div p").text();
alert(p_html);
獲取的內(nèi)容是：這個(gè)是文本內(nèi)容1超鏈接1

  使用.text()方法，我們只讀取元素的純文本內(nèi)容，包括他的后代元素，而此元素中的HTML標(biāo)簽（包括其后代元素的HTML標(biāo)簽）都被剝離出去，只留下文本內(nèi)容。

      text()方法和html()方法一樣可以同時(shí)選定多個(gè)元素，但有一點(diǎn)不同，html()在匹配多個(gè)元素時(shí)只會(huì)讀取匹配元素中的第一個(gè)；而text()方法不同，它在匹配多個(gè)元素時(shí)，會(huì)同時(shí)讀取多個(gè)元素的內(nèi)容。如：

<div>
<p>這個(gè)是文本內(nèi)容1<a href="#">超鏈接1</a></p>
<p>這個(gè)是文本內(nèi)容2<a href="#">超鏈接2</a></p>
</div>
var p_text = $("div p").text();
alert(p_text);
獲取內(nèi)容是：這個(gè)是文本內(nèi)容1超鏈接1這個(gè)是文本內(nèi)容2超鏈接2

      text()方法會(huì)將HTML標(biāo)簽當(dāng)作純文本內(nèi)容來(lái)替換元素的舊內(nèi)容，這一點(diǎn)和.html()方法是完全不一樣，大家可以和前面的.html(htmlString)進(jìn)行比較。不過(guò)他們有一個(gè)相同之處：如果匹配多個(gè)元素時(shí)，采用.text()會(huì)將所匹配元素的內(nèi)容替換成相同的內(nèi)容。

      3、val()方法：它類似于javascript的value屬性，可以用來(lái)獲取或者設(shè)置表單元素的value字段值，無(wú)論元素是文本框還是下拉列表、單選框，它都可以返回元素的值，如果元素為多選，則返回一個(gè)包含所有選擇的值的數(shù)組。前面所講的html()和text()方法都無(wú)法在表單中進(jìn)行操作，val()方法主要用于獲取表單元素的值。至于“<select multiple="multiple">”元素，.val()方法返回一個(gè)包含每個(gè)選中的option的數(shù)組，對(duì)于下接選擇框“<select>”和復(fù)選框，單選（[type="checkbox"],[type="radio"]）你可以使用“:selected”和“:checked”選擇器來(lái)獲取值。

<input type="text" id="address" value="郵箱地址">
$("#address").focus(function(){
var txt = $(this).val();
if(txt=="郵箱地址")
{$(this).val("");}
})
$("#address").blur(function(){
         var txt = $(this).val();
         if(txt=="")
         {$(this).val("郵箱地址")}
         })

總結(jié)上面的3個(gè)方法：

1、html()用來(lái)讀取和修改元素的HTML標(biāo)簽；

2、text()用來(lái)讀取和修改元素的純文本內(nèi)容；

3、val()用來(lái)讀取和修改表單元素的value值；

這三個(gè)方法在功能上的對(duì)比：

1、.html(),.text(),.val()三種方法都是用來(lái)讀取選定元素的內(nèi)容；只不過(guò).html()是用來(lái)讀取元素的HTML內(nèi)容（包括其Html標(biāo)簽），.text()用來(lái)讀取元素的純文本內(nèi)容，包括其后代元素，.val()是用來(lái)讀取表單元素的"value"值。其中.和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；另外.html()方法使用在多個(gè)元素上時(shí)，只讀取第一個(gè)元素；.val()方法和.html()相同，如果其應(yīng)用在多個(gè)元素上時(shí)，只能讀取第一個(gè)表單元素的"value"值，但是.text()和他們不一樣，如果.text()應(yīng)用在多個(gè)元素上時(shí)，將會(huì)讀取所有選中元素的文本內(nèi)容。

2、.html(htmlString),.text(textString)和.val(value)三種方法都是用來(lái)替換選中元素的內(nèi)容，如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí)，那么將會(huì)替換所有選中元素的內(nèi)容。

打了一下午的嗝，終于完成了這篇博客！