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);