標籤：利用 方法 用途 nbsp 篩選 for 語言 color ack
一般來說，DOM操作分為三個方面，即:DOM Core(核心)， HTML_DOM 和 CSS_DOM。
1.DOM CoreDOM Core 並不專屬於JavaScript，任何一種支援DOM的程式設計語言都可以使用它。他的用途並不局限於處理網頁，也可以處理任何一種使用標記語言編寫出來的文檔，例如XML
JavaScript中的GetElemrntById(),getElementsByTagName(),GetAttribute() 和 setAttribute()等方法，這些都是DOM Core的部分。
例如：
使用DOM Core來擷取表單對象的方法：
document.getElementsByTagName("form");
使用DOM Core來擷取元素的Src屬性的方法
document.getElementsByTagName("p").getAttribute("src");2.HTML_DOM
在使用JavaScript和DOM為HTML檔案編寫指令碼時，有許多專屬於HTML_DOM的屬性。HTML_DOM的出現比DOM Core還要早，它提供了一些更簡明的記號來描述各種HTML 屬性。
例如:
使用HTML_DOM擷取表單對象的方法
document.forms//HTML_DOM提供了一個forms對象
使用HTML_DOM來擷取某元素的屬性
element.src
通過上面的方法 可以發現擷取某些對象 屬性及可以用DOM Core 來實現 也可以使用HTML_DOM實現，相比較而言HTML_DOM的實現比較簡短，不過它只能用來處理Web文檔。
3.CSS_DOMCSS_DOM是針對CSS的操作，在JavaScript中國年，CSS_DOM技術的主要作用是擷取和設定style對象的各種屬性，通過改變 style對象的各種屬性，可以是網頁呈現出各種不同的效果。
例如
設定某元素Style對象的字型顏色的方法
document.getElementByTagName("p")[0].style.color = "red";
JQuery作為JavaScript庫，繼承並發揚了JavaScript對DOM對象的操作的特性，使我們能夠方便的操作DOM對象。下面介紹JQuery中的各種DOM操作。
為全面的講解DOM的操作，首先我們先建立一個網頁
HTML代碼 我們先引進JQuery
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> </head> <body> <p title="選擇你喜歡的水果">你最喜歡的水果?</p> <ul> <li title="蘋果">蘋果</li> <li title="橘子">橘子</li> <li title="菠蘿">菠蘿</li> </ul> </body></html>
根據上面的網頁結構 構建出一顆DOM樹，3-2所示。
接下來，對DOM的各種操作豆漿圍繞這棵DOM樹而展開。
尋找元素節點擷取元素節點並列印他的常值內容 JQuery代碼如下：
//尋找ul 的子項目 li 返回集合中的第一個li節點//text()擷取節點上的常值內容var $li = $("ul li:eq(1)");var $li_text = $li.text();alert($li_text);
以上代碼擷取了<ul>元素粒第二個<li>節點，並將它的常值內容“橘子”列印出來。
尋找屬性節點利用JQuery選取器尋找到需要的元素之後，就可以利用attr()方法來擷取它的各種屬性的值，attr()方法的參數可以是一個也可以是兩個，當參數是一個時，則是要查詢的屬性的名字
例如
擷取屬性節點並列印他的title屬性內容 JQuery代碼如下
//尋找屬性節點var $p = $("p");alert($p.attr("title"));建立節點
用JQuery選取器能夠快捷而輕鬆的尋找到文檔中的某個特定的元素節點，然後可以使用attr()方法來擷取元素的各種屬性的值。
真正的DOM操作並非這麼簡單，在DOM操作中，常常需要動態建立HTML內容，時文檔在瀏覽器裡呈現效果放生變化，並且達到各種各樣的人機互動目的。
(1)建立元素節點例如要建立兩個<li>元素及誒單，並且要把他們作為<ul>元素節點的子節點添加到DOM節點樹上。完成這個任務需要兩個步驟。
(1)建立兩個<li>元素
(2)將這兩個新元素插入文檔中。
第一步可以使用JQuery中的工廠函數$()來完成，格式如下
$(html)
$(html)方法會根據傳入的HTML標記字串，建立一個DOM對象，並將這個DOM對象封裝成一個JQuery對象返回。
建立好兩個<li>元素之後，我們可以使用append()方法 添加到DOM樹中
下面時完整代碼
var $li_1 = $("<li>香蕉</li>");var $li_2 = $("<li>雪梨</li>");//將建立的新元素加入文檔中//$("ul").append($li_1);//$("ul").append($li_2);//也可以這樣寫 和上面的兩行是等價的$("ul").append($li_1).append($li_2);
注意：當建立單個元素的時候。要注意閉合標籤和使用XHTML格式。例如建立一個<p>元素,可以使用$("<p/>")或者$("<p></p>").但是不要使用$("<p>")或者大寫的$("<P/>")
無論$(html)中的HTML格式有多麼複雜，都使用相同的方式來建立。例如$("<p><em>哈哈</em><b>一個</b>複雜的組合</p>")
建立屬性節點比較簡單 代碼如下
//建立帶有屬性的節點var $li_3 = $("<li title=‘芒果‘>芒果</li>");$("ul").append($li_3);//是否能擷取到屬性呢alert($("ul li:last").attr("title"));//能提示出來 說明添加屬性成功插入節點
JQuery中將建立好的節點插入某個文檔中的方法並非只有一種，還提供了其他方法，下面一一介紹
append() 向每個匹配的元素內部追加內容
$("ul").append($li_3);
appendTo() 將所有匹配的元素追加到指定的元素中，實際上，使用該方法顛倒了常規的$("A").append(B)的操作，即不是將B追加到A中 而是將A追加到B中
例如：添加到已有文本的最後面。
$("<b>哈哈哈哈</b>").appendTo($p);//p.innerHTML哈哈哈哈
prepend() 向每個匹配的元素內部前置內容
$p.prepend("嘿嘿嘿");//嘿嘿嘿p.innerHTML
prependTo() 將所有建立的節點前置到指定的元素中，實際上是將$(A)prepend(B)的操作顛倒了。不是將B前置到A中而是將A前置到B中
$("<b>吼吼哈嘿</b>").prependTo($p);//吼吼哈嘿p.innerHTML
after()在每個匹配的元素之後插入內容
<p>我想說</p>$("p").after("<b>你好</b>")//結果<p>我想說</p><b>你好</b>
insertAfter()將所有的元素插入到指定的元素的後面。實際上是用該方法是顛倒了常規的$(A)after(B)的操作，即不是將B插入到了A後面，而是將A插入到B後面。
<p id="p1">測試插入</p>$("<b>可以嗎</b>").insertAfter($("#p1"));
其實這些顛倒的寫法效果都一樣 只不過是建立的節點在前在後的問題。
before()在每個匹配的元素之前插入內容
<p>我想說</p>$("p").before("<b>你好</b>");結果<b>你好</b><p>我想說</p>
insertBefore() 將所有匹配的元素插入到指定的元素前面，實際上，使用該方法是顛倒了常規的$A.before(B)的操作，即不是將B插入到A前面，而是將A插入到B前面
<p>我想說</p>$("<b>你好</b>")insertBefore($"p");結果<b>你好</b><p>我想說</p>
這些插入節點的方法不僅能將新建立的DOM元素插入到文檔中，也能對所有的DOM元素進行移動
例如利用建立的新元素並對他們進行插入操作
例子
<script>var $li_1 = $("<li title=‘香蕉‘>香蕉</li>")var $li_2 = $("<li title=‘雪梨‘>雪梨</li>");var $li_3 = $("<li title=‘其他‘>其他</li>")var $parent = $("ul");var $two_li = $("ul li:eq(1)");var $one_li = $("ul li:eq(0)");$parent.append($li_1);$parent.append($li_2);$li_3.insertBefore($two_li);$one_li.insertAfter($two_li);</script>
直到執行到這裡的時候 效果是這樣的
此時$two_li 是橘子
執行到 $parent.append($li_2);時效果是這樣的
執行到這裡的時候 $li_3.insertBefore($two_li);意思時把建立的新節點插入到two_li之前 效果是這樣的
這裡以後再用$two_li
執行最後一句之後 效果是這樣的
刪除節點
如果文檔中的某一個元素多餘，那麼就應該將其刪除，JQuery提供了兩種刪除節點的方法，即remove()和empty()
(1)remove()方法作用是從DOM中移除所有匹配的元素，傳入的參數用於根據JQuery運算式來篩選元素。
接著上面的例子講 添加下面一行代碼
$one_li.remove();
會把蘋果從列表中刪除。
當某個節點用remove()方法刪除後，該節點所包含的所有後代節點將同時被刪除。這個方法返回的是一個指向已被刪除的節點的引用，因此可以在以後再使用這些元素。下面的代碼說明了元素用remove()刪除後，還是可以繼續使用的，
var removeLi = $one_li.remove();$parent.append(removeLi);
再添加上去 已經變成了ul的最後一個子節點，這樣也可以達到移動元素的效果
remove()方法也可以通過傳遞參數來選擇性的刪除元素，代碼如下
$("ul li").remove("ul li:eq(1)");(2)empty()方法
嚴格來說empty()方法並不是刪除節點，而是清空節點，他能清空元素中所有的後代節點
$("ul li:eq(0)").empty()//擷取第二個li節點 清空元素裡的內容 注意是元素裡
關於JqueryDOM的操作還有好多，包括 複製節點 替換節點等等，在下一篇部落格中講解。
HTML 學習筆記 JQuery（DOM 操作）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
