JQuery中的DOM操做

DOM是一種與瀏覽器、平臺、語言無關的接口，使用該接口能夠輕鬆地訪問頁面中全部的標準組件。DOM解決了JavaScript和JScript之間的衝突，爲此，能夠輕鬆獲取和操做網頁中的數據、腳本和表現層對象。

 

DOM操做分爲：DOM Core、HTML-DOM和CSS-DOM

（1）DOM Core

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

document.getElementsByTagName("form"); //使用DOM Core來獲取表單對象的方法

element.getAttribute("src");//使用DOM  Core來獲取某元素的src屬性的方法

（2）HTML-DOM

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

document.forms  //HTML-DOM提供了一個forms對象

element.src //HTML-DOM來獲取某元素的src屬性的方法

獲取某些對象、屬性既能夠用DOM core實現，也能夠用HTML-DOM來使用。可是HTML-DOM只能用來處理Web文檔。

（3）CSS-DOM

是針對css的操做。在JavaScript中，CSS-DOM技術的主要做用是獲取和設置style對象的各類屬性。經過改變style對象的各類屬性，能夠使網頁呈現出各類不一樣的效果。

element.style.color="red" //設置某元素style對象字體顏色

 

JQuery做爲JavaScript庫，繼承併發揚了JavaScript對DOM對象的操做的特性，使開發人員能方便地操做DOM對象。

（1）查找節點

var $li=$("ul li:eq(1)");//獲取<ul>裏第2個<li>節點

var li_txt=$li.text();//獲取這個節點裏面的內容

var li_title=$li.attr("title");//獲取這個節點屬性title

（2）建立節點

var $li_1=$("<li title='香蕉'>香蕉</li>"); //建立第1個<li>元素

$("ul").append($li_1); //添加到<ul>節點中，使之能在網頁中顯示

（3）插入節點

append()  

向每一個匹配的元素內部追加內容。$("p").append("<b>你好</b>");

appendTo()

將全部匹配的元素追加到指定的元素中，$(A).appendTo(B)，將A追加到B中。

prepend()

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

prependTo()

將全部匹配的元素前置到指定的元素中。$(A).prependTo(B)，將A前置到B中

after()

在每一個匹配的元素以後插入內容

insertAfter()

將全部匹配的元素插入到指定元素的後面。$(A).insertAfter(B)，將A插入到B後面

before()

在每一個匹配的元素以前插入內容

insertBefore()

將全部的元素插入到指定的元素的前面。$(A).insertBefore(B)，將A插入到B前面

（4）刪除節點

 

（5）複製節點

（6）替換節點

（7）包裹節點

（8）屬性操做

（9）樣式操做

（10）設置和獲取HTML、文本和值

（11）遍歷節點

（12）CSS-DOM操做