1. DOM操作分類
1.1 DOM Core
DOM Core不專屬於JavaScript，任何支援DOM的程式設計語言都可以使用。JavaScript中的getElementById()、getElemetsByTagName()、getAttribute()和setAttribute()等方法，都是DOM Core的組成部分。
1.2 HTML DOM
在使用JavaScript和DOM為HTML檔案編寫指令碼時，有許多專屬於HTML-DOM的屬性。它提供了一些更簡明的記號來描述各種HTML元素的屬性，例如document.forms或element.src。有些方法即可以用DOM Core來實現，也可以使用HTML-DOM實現。
1.3 CSS DOM
CSS DOM 是針對CSS的操作。在JavaScript中，CSS DOM技術的主要作用是獲取和設定style物件的各種屬性，通過改變style物件的各種屬性，可以使網頁呈現出各種不同的效果。
2. DOM操作
2.1 查詢節點
使用jQuery在文件樹上查詢節點，可通過jQuery選擇器來完成，例如：
var $li = $("ul li:eq(1)");
var li_txt = $li.text();
alert(li_txt);
利用jQuery選擇器查詢到所需元素後，就可以使用attr()方法來獲取它的各種屬性值，例如：
var $para = $("p");
var p_txt = $para.attr("title");
alert(p_txt);
2.2 建立節點
如果要建立兩個<li>元素節點，並且要把它們作為<ul>元素節點的子節點新增到DOM節點樹上，可使用工廠函式$()來完成，格式如下：
$(html);
$(html)方法會根據傳入的HTML標記字串，建立一個DOM物件，並將這個DOM物件包裝成一個jQuery物件後返回，例如：
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
$("ul").append($li_1);
$("ul").append($li_2);
建立屬性節點與建立文字節點類似，也是直接在建立元素節點時一起建立，例如：
var $li_1 = $("<li title="t1">t1</li>");
var $li_2 = $("<li title="t2">t2</li>");
$("ul").append($li_1);
$("ul").append($li_2);
2.3 插入節點
將新建立的節點插入某個文件的方法有多種，如下表：
| 方法 | 描述 | 示例 |
|---|---|---|
| append() | 向每個匹配的元素內部追加內容。 | $(“p”).append(“<b>me</b>”); |
| appendTo() | 將所有匹配的元素追加到指定的元素中。 | $(“<b>me</b>”).appendTo(“p”); |
| prepend() | 向每個匹配的元素內部前置內容。 | $(“p”).prepend(“<b>me</b>”); |
| prependTo() | 將所有匹配的元素前置到指定的元素中。 | $(“<b>me</b>”).prependTo(“p”); |
| after() | 在每個匹配的元素之後插入內容。 | $(“p”).after(“<b>me</b>”); |
| insertAfter() | 將所有匹配的元素插入到指定元素的後面。 | $(“<b>me</b>”).insertAfter(“p”); |
| before() | 在每個匹配的元素之前插入內容。 | $(“p”).before(“<b>me</b>”); |
| insertBefore() | 將所有匹配的元素插入到指定的元素的前面。 | $(“<b>me</b>”).insertBefore(“p”); |
2.4 刪除節點
如果文件中某一個元素多餘，那麼應將其刪除。jQuery提供了兩種刪除節點的方法，即remove()和empty()。
remove()方法的作用是從DOM中刪除所有匹配的元素，例如：
$("ul li:eq(1)").remove();
當某個節點用remove()方法刪除後，該節點所包含的所有後代節點將同時被刪除，這個方法的返回值是一個指向已被刪除的節點的引用。
empty()方法的作用是清空節點，例如：
$("ul li:eq(1)").empty();
當執行程式碼後，第2個<li>元素的內容被清空了，只剩下<li>標籤預設的圓點符號。
2.5 複製節點
如果需要複製一個元素，可以使用clone()來完成，例如：
$("ul li").click(function(){
$(this).clone().appendTo("ul");
})
複製節點後，被複制的新元素並不具有任何行為，如果需要新元素也具有複製功能，可以在clone()方法中傳遞一個引數true，例如：
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");
})
2.6 替換節點
如果要替換節點，jQuery提供了相應的方法，即replaceWith()和replaceAll()。replaceWith()方法的作用是將所有匹配的元素都替換成指定的HTML或者DOM元素，例如：
$("p").replaceWith("<strong>Name</strong>");
也可以使用另一個方法replaceAll()來實現，該方法與replaceWith()方法的作用相同，只是顛倒了replaceWith()操作，例如：
$("<strong>Name</strong>").replaceAll("p");
2.7 包裹節點
如果要將某個節點用其他標記包裹起來，jQuery提供了相應的方法，即wrap()，例如：
$("strong").wrap("<b></b>");
wrapAll()方法會將所有匹配的元素用一個元素來包裹，它不同於wrap()方法，wrap()方法是將所有的元素進行單獨的包裹，例如：
$("strong").wrapAll("<b></b>");
wrapInner()方法將每一個匹配的元素的子內容用其他結構化的標記包裹起來，例如：
$("strong").wrapInner("<b></b>");
2.8 屬性操作
在jQuery中，用attr()方法來獲取和設定元素屬性值，例如：
var p_txt = $("p").attr("title");
如果要設定元素屬性值，也可以使用同一個方法，不同的是，需要傳遞兩個引數，例如：
$("p").attr("title", "my title");
在某些情況下，要刪除文件中某個元素的特定屬性，可以使用removeAttr()方法來完成，例如：
$("p").removeAttr("title");
2.9 樣式操作
使用attr()方法可以獲取元素的class，例如：
var p_class = $("p").attr("class");
也可以使用attr()方法來設定class，例如：
$("p").attr("class", "high");
在大多數情況下，它是將原來的class替換為新的class，而不是在原來的基礎上追加新的class。jQuery提供了專門的addClass()方法來追加樣式，例如：
$("p").addClass("another");
如果使用者要刪除class的某個值，可以使用與addClass()方法相反的removeClass()方法來完成，例如：
$("p").removeClass("high");
當它不帶引數時，就會將class的值全部刪除，例如：
$("p").removeClass();
jQuery還提供了一個toggleClass()方法控制樣式上的重複切換，如果類名存在則刪除它，如果類名不存在則新增它，例如：
$("p").toggleClass("high");
hasClass()可以用來判斷元素中是否含有某個class，如果有，則返回true，否則返回false，例如：
$("p").hasClass("high");
2.10 設定和獲取HTML、文字和值
html()方法類似於javascript中的innerHTML屬性，可以用來讀取或者設定某個元素中的HTML內容，例如：
var p_html = $("p").html();
如果需要設定某元素的HTML，也可以使用該方法，例如：
$("p").html("<strong>Name</strong>");
text()方法類似於javascript中的innerText屬性，可以用來讀取或設定某個元素中的文字內容，例如：
var p_text = $("p").text();
val()方法類似於javascript中的value屬性，可以用來設定和獲取元素的值，例如：
$("#username").focus(function(){
var text_value = $(this).val();
alert(text_value);
});
2.11 遍歷節點
children()方法用於取得匹配元素的子元素集合，例如：
$("p").children();
next()方法用於取得匹配元素後面緊鄰的同輩元素，例如：
$("p").next();
prev()方法用於取得匹配元素前面緊鄰的同輩元素，例如：
$("p").prev();
siblings()方法用於取得匹配元素前後所有的同輩元素，例如：sli
$("p").siblings();
closet()方法用來取得最近的匹配元素，首先檢查當前元素是否匹配，如果匹配則直接返回，如果不匹配則向上查詢父元素，直到找到匹配選擇器的元素，如果沒有找到，則返回一個空的jQuery物件，例如：
$(e.target).closet("li").css("color", "red");
2.12 CSS-DOM操作
CSS-DOM技術簡單來說就是讀取和設定style物件的各種屬性，可以直接利用css()方法獲取元素的樣式屬性，例如：
$("p").css("color");
也可以直接利用css()方法設定某個元素的單個樣式，例如：
$("p").css("color", "red");
在jQuery中還有一個height()方法，可以取得匹配元素當前計算的高度值，例如：
$("p").height();
與height()方法對應的還有一個width()方法，可以取得匹配元素的寬度值，例如：
$("p").width();
CSS-DOM中，還有以下幾個經常使用的方法。offset()方法的作用是獲取元素在當前視窗的相對偏侈，其中返回的物件包含兩個屬性，即top和left，它只對可見元素有效，例如：
var offset = $("p").offset();
var left = offset.left;
var top = offset.top;
position()方法的作用是獲取元素相對於最近的一個position樣式屬性設定relative或absolute的祖父節點的相對偏移，它返回的物件也包括兩個屬性，即top和left，例如：
var position = $("p").position();
var left = position.left;
var top = position.top;
scrollTop()方法和scrollLeft()方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離，例如：
var $p = $("p");
var scrollTop = $p.scrollTop();
var scrollLeft = $p.scrollLeft();
另外，可以為這兩個方法指定一個引數，控制元素的滾動條滾動到指定位置，例如：
$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);