DOM文檔對象模型，是一種與瀏覽器拦赠、平臺巍沙、語言無關(guān)的接口葵姥，使用該接口可以輕松訪問頁面中所有標(biāo)準(zhǔn)組件荷鼠。
DOM操作的分類
1、DOM Core（核心）
不專屬于JavaScript 榔幸，任何DOM的編程都可使用它允乐。
2、HTML-DOM
代碼通常比較短削咆，只能用來處理web文檔牍疏。
3、CSS-DOM
針對CSS的操作。在JavaScript中，它的作用是獲取和設(shè)置style對象的各種屬性械巡。
jQuery中的DOM操作
查找節(jié)點
1畜隶、查找元素節(jié)點
2、查找屬性節(jié)點：
在jQuery選擇器查找到需要的元素后片任，使用attr()方法獲取獲取屬性值。
創(chuàng)建節(jié)點
1、創(chuàng)建元素節(jié)點
（1）創(chuàng)建新元素
（2）將新元素插入到文檔中
var li_1 = $("<li>hello</li>");
$("ul").append($li_1);
2掏导、創(chuàng)建文本節(jié)點
在上一步的基礎(chǔ)上添加內(nèi)容
3、創(chuàng)建屬性節(jié)點
在創(chuàng)建元素節(jié)點時一起創(chuàng)建屬性節(jié)點
插入節(jié)點
| 方法 | 描述 |
|---|---|
| append() | 向每個匹配的元素內(nèi)部追加內(nèi)容 |
| appendTo() | 將所有匹配的元素追加到指定的元素中羽峰。$(A).append(B)的意思是將A加到B中 |
| prepend() | 向每個匹配的元素內(nèi)部前置內(nèi)容 |
| prependTo() | 將所有匹配的元素前置到指定元素中趟咆。$(A).prependTo(B)的意思是將A前置到B中 |
| after() | 在每個匹配的元素后插入內(nèi)容 |
| insertAfter() | 將所有匹配的元素插入到指定元素的后面。$(A).insertAfter(B)的意思是將A插入到B的后面 |
| before() | 在每個匹配的元素之前插入內(nèi)容 |
| insertBefore() | 將所有匹配的元素插入到指定元素的前面梅屉。$(A).insertBefore(B)的意思是將A插入到B的前面 |
刪除節(jié)點
- remove()方法
作用：從DOM中刪除所有匹配的元素值纱，傳入的參數(shù)根據(jù)jQuery表達式來篩選元素
當(dāng)某個節(jié)點用remove()方法后，該節(jié)點包含的所有后代節(jié)點將被同時刪除 - detach()方法
這個方法不會把匹配的元素從jQuery對象中刪除坯汤，是從DOM中去掉所有匹配的元素计雌。與remove不同的是，所有綁定的事件玫霎、附加的數(shù)據(jù)等都會保留下來凿滤。
區(qū)別：當(dāng)刪除使用的是detach()時妈橄，點擊被刪除項的alert時，是有alert效果的翁脆，如果刪除換成remove()眷蚓，則不會有alert效果
//html代碼
<ul>
<li title="蘋果">蘋果</li>
<li title="橘子">橘子</li>
<li title="菠蘿">菠蘿</li>
</ul>
//jQuery代碼
$("ul li").click(function(){
alert( $(this).html() );
})
var $li = $("ul li:eq(1)").detach();
$li.appendTo("ul");
- empty()方法
此方法嚴(yán)格來講不是刪除節(jié)點，是清空節(jié)點反番，它可以清空元素中的所有后代節(jié)點沙热。
復(fù)制節(jié)點
通過鼠標(biāo)拖動一個對象，拖動功能就是復(fù)制節(jié)點罢缸。使用clone()方法篙贸。
復(fù)制節(jié)點后，被復(fù)制的新元素不具有任何行為枫疆，如果需要新元素也具有復(fù)制功能爵川，可以在clone()方法中傳遞參數(shù)true。
有無參數(shù)區(qū)別：
有參數(shù)：點擊<li>標(biāo)簽下的字息楔，在下方也會出發(fā)click效果寝贡。
無參數(shù)：只能點擊<li>標(biāo)簽內(nèi)的字，在下方才會出發(fā)click效果值依。
//html代碼
<ul>
<li title="蘋果">蘋果</li>
<li title="橘子">橘子</li>
<li title="菠蘿">菠蘿</li>
</ul>
//jQuery代碼
$("ul li").click(function(){
$(this).clone(true).appendTo("body");
})
替換節(jié)點
replaceWith()和replaceAll()方法
- replaceWith()是將所有匹配的元素都替換成指定的HTML或者DOM元素圃泡。
$("p").replaceWith("<strong>你最不喜歡的水果是？</strong>"); - replaceAll()方法與replaceWith()方法的作用相同愿险，只是顛倒了操作颇蜡。
$(("<strong>你最不喜歡的水果是？</strong>").replaceAll("p");
如果在替換之前辆亏，已經(jīng)為元素綁定事件风秤，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件褒链。
包裹節(jié)點
如果要將某個節(jié)點用其他標(biāo)記包裹起來唁情，就用wrap()方法。該方法對于需要在文檔中插入額外的結(jié)構(gòu)化標(biāo)記非常有用甫匹，且不會破壞原始文檔的語義甸鸟。
$("strong").wrap("<b></b>");
的意思為
<b><strong title="選擇你最喜歡的水果">你最喜歡的水果是？</strong></b>
包裹節(jié)點還有其他兩個方法：
- wrapAll()方法
該方法將所有匹配的元素用一個元素來包裹兵迅。
wrap()是將所有元素進行單獨的包裹抢韭。 - wrapInner()方法
該方法將每一個匹配的元素的子內(nèi)容（包含文本節(jié)點）用其他結(jié)構(gòu)化的標(biāo)記包裹起來。
屬性操作
- 獲取設(shè)置屬性
//獲取p元素的節(jié)點屬性title
var $para = $("p");
var p_txt = $para.attr("title");
//設(shè)置屬性
$p("p").attr("title","your title");
//設(shè)置多個屬性
$("p").attr({"title":"your title","name":"test"});
- 刪除屬性
刪除文檔中某個特定屬性恍箭，可以使用removeAttr()方法
樣式操作
- 獲取設(shè)置樣式
//獲取樣式和設(shè)置樣式
var p_class = $("p").attr("class");
$("p").attr("class","high");
追加樣式
用addClass()方法
注意：如果給一個元素設(shè)置了多個class屬性刻恭，就相當(dāng)于合并了它們的樣式；
如果有不同的class設(shè)置了同一個屬性，則后者覆蓋前者鳍贾。移除樣式
removeClass()方法:從匹配的元素中刪除全部或者指定的class鞍匾。
//移除指定屬性樣式
$("p").removeClass("high another");
//移除所有class
$("p").removeClass();
切換樣式
toggle()方法：交替執(zhí)行代碼
toggleClass()方法：控制樣式上的重復(fù)切換，如果類名存在則刪除它骑科，如果類名不存在則添加它橡淑。判斷是否含有某個樣式
hasClass()方法：用來判斷是否含有某個class，如果有則返回true咆爽，沒有則返回false梁棠。該方法也可以用is來表達。
$("p").is("another"); //判斷p里是否含有another類
設(shè)置和獲取html斗埂、文本和值
html()方法
類似于JavaScript的innerHTML屬性符糊，用來讀取或設(shè)置某個元素中的HTML內(nèi)容
$("p").html("<strong>你最喜歡的水果是？</strong>"); //設(shè)置p元素的html代碼
注意：html()方法可以用于XHTML文檔呛凶，但不能用于XML文檔男娄。text()方法
類似于JavaScript的innerText屬性，用來讀取或設(shè)置某個元素中的文本內(nèi)容把兔。
注意：innerText屬性不能在火狐瀏覽器運行沪伙，但text()支持所有瀏覽器瓮顽；text()對HTML和XML文檔都有用县好。val()方法
類似于JavaScript中的value屬性，用來設(shè)置和獲取元素的值暖混。還有一個用處缕贡，就是它能使select（下拉列表框）、CheckBox（多選框）和radio（單選框）響應(yīng)的選項被選中拣播。
遍歷節(jié)點
- children()方法
用于取得匹配元素的子元素集合（不考慮其他后代元素） - next()方法
用于匹配元素后面緊鄰的同輩元素晾咪。 - prev()方法
用于匹配元素前面緊鄰的同輩元素。 - siblings()方法
用于匹配元素前后所有的同輩元素贮配。 - closest()方法
用于取得最近的匹配元素谍倦。首先檢查當(dāng)前元素是否匹配，如果匹配則直接返回元素本身泪勒，如果不匹配則向上查找父元素昼蛀，逐級向上直到找到匹配選擇器的元素。如果什么都沒找到則返回空的jQuery對象圆存。 - parent()叼旋、parents()、closest()區(qū)別
| 方法 | 描述 |
|---|---|
| parent() | 獲得集合中每個匹配元素的父級元素 |
| parents() | 獲得集合中每個匹配元素的祖先元素（它找到第一個父節(jié)點后沒有停止沦辙，而是繼續(xù)尋找夫植，最后返回多個父節(jié)點） |
| closest() | 從元素本身開始，逐級向上級元素匹配油讯，并返回最先匹配的祖先元素 |
- 其他遍歷節(jié)點的方法在此先不寫了详民，遇到時候再查~
CSS-DOM操作
css()方法可以獲取和設(shè)置元素的樣式屬性
注意：1延欠、如果值是數(shù)字，將會被自動轉(zhuǎn)為像素值
2沈跨、如果屬性帶有“-”符號衫冻，如果在設(shè)置屬性的值時不帶引號，就要用駝峰寫法谒出，如果帶上引號隅俘，則可以寫成font-size或者fontSize。 建議最好帶引號~
offset()方法
用來獲取元素在當(dāng)前視窗的相對位移笤喳，其中返回的對象包含兩個屬性为居，top右偏移和left左偏移position()方法
用來獲取元素相對于最近的一個position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點的相對位移，返回對象和offset一樣杀狡。scrollTop()蒙畴、scrollLeft()方法
獲取元素滾動條距頂端距離、距左側(cè)距離
