[jQuery]DOM操作

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

本文出自 “方圓之間” 部落格，謝絕轉載！