DOM文檔對象模型，是一種與瀏覽器、平臺、語言無關的接口，使用該接口可以輕松訪問頁面中所有標準組件。

DOM操作的分類

1、DOM Core（核心）
不專屬于JavaScript ，任何DOM的編程都可使用它。
2、HTML-DOM
代碼通常比較短，只能用來處理web文檔。
3、CSS-DOM
針對CSS的操作。在JavaScript中，它的作用是獲取和設置style對象的各種屬性。

jQuery中的DOM操作

查找節點
1、查找元素節點
2、查找屬性節點：
在jQuery選擇器查找到需要的元素后，使用attr()方法獲取獲取屬性值。

創建節點
1、創建元素節點
（1）創建新元素
（2）將新元素插入到文檔中

var li_1 = $("<li>hello</li>");
$("ul").append($li_1);

2、創建文本節點
在上一步的基礎上添加內容

3、創建屬性節點
在創建元素節點時一起創建屬性節點

插入節點

刪除節點

• remove()方法
  作用：從DOM中刪除所有匹配的元素，傳入的參數根據jQuery表達式來篩選元素
  當某個節點用remove()方法后，該節點包含的所有后代節點將被同時刪除
• detach()方法
  這個方法不會把匹配的元素從jQuery對象中刪除，是從DOM中去掉所有匹配的元素。與remove不同的是，所有綁定的事件、附加的數據等都會保留下來。

區別：當刪除使用的是detach()時，點擊被刪除項的alert時，是有alert效果的，如果刪除換成remove()，則不會有alert效果

//html代碼
<ul>
    <li title="蘋果">蘋果</li>
    <li title="橘子">橘子</li>
    <li title="菠蘿">菠蘿</li>
</ul>
//jQuery代碼
$("ul li").click(function(){
        alert( $(this).html() );
    })
    var $li = $("ul li:eq(1)").detach();
    $li.appendTo("ul");

• empty()方法
  此方法嚴格來講不是刪除節點，是清空節點，它可以清空元素中的所有后代節點。

有無參數區別：
有參數：點擊<li>標簽下的字，在下方也會出發click效果。
無參數：只能點擊<li>標簽內的字，在下方才會出發click效果。

//html代碼
<ul>
    <li title="蘋果">蘋果</li>
    <li title="橘子">橘子</li>
    <li title="菠蘿">菠蘿</li>
</ul>
//jQuery代碼
$("ul li").click(function(){
    $(this).clone(true).appendTo("body");
})

有參數.png

替換節點
replaceWith()和replaceAll()方法

• replaceWith()是將所有匹配的元素都替換成指定的HTML或者DOM元素。
  $("p").replaceWith("<strong>你最不喜歡的水果是？</strong>");
• replaceAll()方法與replaceWith()方法的作用相同，只是顛倒了操作。
  $(("<strong>你最不喜歡的水果是？</strong>").replaceAll("p");
  如果在替換之前，已經為元素綁定事件，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。

包裹節點
如果要將某個節點用其他標記包裹起來，就用wrap()方法。該方法對于需要在文檔中插入額外的結構化標記非常有用，且不會破壞原始文檔的語義。

$("strong").wrap("<b></b>");
的意思為
<b><strong title="選擇你最喜歡的水果">你最喜歡的水果是？</strong></b>

包裹節點還有其他兩個方法：

• wrapAll()方法
  該方法將所有匹配的元素用一個元素來包裹。
  wrap()是將所有元素進行單獨的包裹。
• wrapInner()方法
  該方法將每一個匹配的元素的子內容（包含文本節點）用其他結構化的標記包裹起來。

屬性操作

• 獲取設置屬性

//獲取p元素的節點屬性title
var $para = $("p");
var p_txt = $para.attr("title");
//設置屬性
$p("p").attr("title","your title");
//設置多個屬性
$("p").attr({"title":"your title","name":"test"});

• 刪除屬性
  刪除文檔中某個特定屬性，可以使用removeAttr()方法

樣式操作

• 獲取設置樣式

//獲取樣式和設置樣式
var p_class = $("p").attr("class");
$("p").attr("class","high");

• 追加樣式
  用addClass()方法
  注意：如果給一個元素設置了多個class屬性，就相當于合并了它們的樣式；
  如果有不同的class設置了同一個屬性，則后者覆蓋前者。

• 移除樣式
  removeClass()方法:從匹配的元素中刪除全部或者指定的class。

//移除指定屬性樣式
$("p").removeClass("high another");
//移除所有class
$("p").removeClass();

• 切換樣式
  toggle()方法：交替執行代碼
  toggleClass()方法：控制樣式上的重復切換，如果類名存在則刪除它，如果類名不存在則添加它。

• 判斷是否含有某個樣式
  hasClass()方法：用來判斷是否含有某個class，如果有則返回true，沒有則返回false。該方法也可以用is來表達。
  $("p").is("another"); //判斷p里是否含有another類

設置和獲取html、文本和值

• html()方法
  類似于JavaScript的innerHTML屬性，用來讀取或設置某個元素中的HTML內容
  $("p").html("<strong>你最喜歡的水果是？</strong>"); //設置p元素的html代碼
  注意：html()方法可以用于XHTML文檔，但不能用于XML文檔。

• text()方法
  類似于JavaScript的innerText屬性，用來讀取或設置某個元素中的文本內容。
  注意：innerText屬性不能在火狐瀏覽器運行，但text()支持所有瀏覽器；text()對HTML和XML文檔都有用。

• val()方法
  類似于JavaScript中的value屬性，用來設置和獲取元素的值。還有一個用處，就是它能使select（下拉列表框）、CheckBox（多選框）和radio（單選框）響應的選項被選中。

遍歷節點

• children()方法
  用于取得匹配元素的子元素集合（不考慮其他后代元素）
• next()方法
  用于匹配元素后面緊鄰的同輩元素。
• prev()方法
  用于匹配元素前面緊鄰的同輩元素。
• siblings()方法
  用于匹配元素前后所有的同輩元素。
• closest()方法
  用于取得最近的匹配元素。首先檢查當前元素是否匹配，如果匹配則直接返回元素本身，如果不匹配則向上查找父元素，逐級向上直到找到匹配選擇器的元素。如果什么都沒找到則返回空的jQuery對象。
• parent()、parents()、closest()區別

• 其他遍歷節點的方法在此先不寫了，遇到時候再查~

CSS-DOM操作
css()方法可以獲取和設置元素的樣式屬性
注意：1、如果值是數字，將會被自動轉為像素值
2、如果屬性帶有“-”符號，如果在設置屬性的值時不帶引號，就要用駝峰寫法，如果帶上引號，則可以寫成font-size或者fontSize。 建議最好帶引號~

• offset()方法
  用來獲取元素在當前視窗的相對位移，其中返回的對象包含兩個屬性，top右偏移和left左偏移

• position()方法
  用來獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節點的相對位移，返回對象和offset一樣。

• scrollTop()、scrollLeft()方法
  獲取元素滾動條距頂端距離、距左側距離