Sunday, Apr 12, 2026

鋒利的jQuery--第三章 jQuery中的DOM操作

2014/03/03 來源：開源中國

jQuery中的DOM操作

DOM是Document Object Model的縮寫，意思是文檔對象模型。根據W3C DOM規範，DOM是一種與瀏覽器、平台、語言無關的接口，使用該接口可以輕鬆地訪問頁面中的所以標準組件。

3.1 DOM操作的分類

DOM操作可以分為3個方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

1. DOM Core

DOM Core並不專屬於JavaScript，任何一種支持DOM的程序設計語言都可以使用它，它的用途並非僅限於處理網頁，也可以用來處理任何一種使用標記語言寫出來的文檔，例如XML。

JavaScript中的getElementByI的、getElementsByTagName、getAttribute等方法都是DOM Core的組成部分。

例如：

使用DOM Core來獲取表單對象的方法：

document.getElementsByTagName(「form」);
使用DOM Core來獲取某元素的src屬性的方法：

element.getAttribute(「src」);

2. HTML DOM

在使用JavaScript和DOM為HTML文件編寫腳本時，有許多專屬於HTML-DOM的屬性。HTML-DOM的出現甚至比DOM Core還要早，它提供了一些更簡明的記號來描述各種HTML元素的屬性。

例如：

使用HTML-DOM來獲取表單對象的方法：

document.forms//HTML-DOM提供了一個forms對象
使用HTML-DOM來獲取某元素的src屬性的方法：

element.src;

可以發現獲取某些對象、屬性既可以用DOM Core來實現也可以使用HTML-DOM實現，。相比較而言HTML-DOM的代碼通常比較簡短，不過它只能用來處理Web文檔。

3. CSS_DOM

CSS-DOM是針對CSS的操作。

例如：設置某元素style對象字體顏色的方法：

element.style.color="red";

3.2 jQuery中的DOM操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>dom</title> </head> <body> 你最喜歡的水果是？ <ul> <li title="蘋果">蘋果</title> <li title="橘子">橘子</title> <li title="菠蘿">菠蘿</title> </ul> </html>

3.2.1 查找節點

1. 查找元素節點
  
  var $li = $(「ul li:eq(1)「);
  
  var li_txt = $li.text;
  
  alert(li_txt);
1. 查找屬性節點
  
  利用jQuery選擇器查找到元素後，就可以使用attr方法獲取它的各種屬性的值。
var $para = $(「p」);

var p_txt = $para.attr(「title」);

alert(p_txt);

3.2.2 創建節點

創建元素節點

（1）創建兩個
新元素。

（2）將這兩個新元素插入文檔中。

$(html) 方法會根據傳入的HTML標記字符串，創建一個DOM對象，並將這個DOM對象包裝成一個jQuery對象後返回。

var $li_1 = $(「「);

var $li_2 = $(「「);

$(「ul」).append($li_1);

$(「ul」).append($li_2);//可以採取鏈式寫法：$(「ul」).append($li_1).append($li_2);

創建文本節點

var $li_1 = $(「
香蕉「);//創建一個
元素，包括元素節點和文本節點「香蕉」

var $li_2 = $(「
雪梨「);

$(「ul」).append($li_1);

$(「ul」).append($li_2);

創建屬性節點

var $li_1 = $(「
香蕉「); //title='香蕉'就是創建的屬性節點

var $li_2 = $(「
雪梨「);

$(「ul」).append($li_1);

$(「ul」).append($li_2);

3.2.3 插入節點

表3-1 插入節點的方法

方法描述

append 向每個匹配的元素內容追加內容。

appendTo 將所以匹配的元素追加到指定的元素中。

prepend 向每個匹配的元素內容內部前置內容。

prependTo 將所有匹配的元素前置到指定的元素中。

after 在每個匹配的元素之後插入內容

insertAfter 將所有匹配的元素插入到指定元素後面。

before 在每個匹配的元素之前插入內容

insertBefore 將所有匹配的元素插入到指定的元素前面

var $li_1 = $(「

香蕉

雪梨

其它

「);

var $parent = $(「ul」);

var $two_li = $(「ul li:eq(1)「);

$parent.append($li_1);

$parent.prepend($li_2);

$li_3.insertAfter($two_li);

var $one_li = $(「ul li:eq(1)「);

var $two_li = $(「ul li:eq(2)「);

$two_li.insertBefore($one_li);

3.2.4 刪除節點

jQuery提供了兩種刪除節點的方法，即remove和empty。

1. remove方法
  
  作用是從DOM中刪除所有匹配的元素，傳入的參數用於根據jQuery表達式來篩選元素。
  
  $(「ul li:eq(1)「).remove;

當某個節點用remove方法刪除後，該節點所包含的所有後代節點將同時被刪除。這個方法的返回值是一個指向已被刪除的節點的引用，因此可以在以後再使用這些元素。

var $li = $("ul li:eq(1)").remove; $li.appendTo("ul");//把剛才刪除的節點又重新添加到<ul>元素里

remove方法也可以通過傳遞參數來選擇性地刪除元素，jQuery代碼如下：

$("ul li").remove("li[title!=菠蘿]");

1. empty方法
  
  empty方法並不是刪除節點而是清空節點，它能清空元素中的所有後代節點。

3.2.5 複製節點

$("ul li").click(function{ $(this).clone.appendTo("ul");//複製當前單擊的節點並將其追加到<ul>元素中 })

複製節點後，被複製的新元素並不具有任何行為。如果需要新元素也具有複製功能（本例是單擊事件），可以：

$(this).clone(true).appendTo("body");//注意參數true

在clone方法中傳遞了一個參數true，它的含義是複製元素的同時複製元素所綁定的事件。因此鈣元素的副本也同樣具有複製功能。

3.2.6 替換節點

要替換某個節點，jQuery提供了相應的方法，即replaceWith和replaceAll.

$("p").replaceWith("你最不喜歡的水果是?");

replaceAll方法與replaceWith相同，只是顛倒了replaceWith操作。如：

$("你最不喜歡的水果是?").replaceAll("p");

如果在替換之前，已經為元素綁定事件，替換後原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。

3.2.7 包裹節點

喜歡這篇文章嗎？快分享吧

您可能感興趣

免責聲明：本文內容來源于開源中國，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。

台灣正體

URL: https://read01.com/A84yO.html