DOM操作的分類
1.DOM Core
DOM Core 不屬于Javascript免糕，任何一種支持DOM 的程序設(shè)計(jì)語(yǔ)言都可以使用它恰响。
Javascript 中的以下方法都是DOM Core 的組成部分
getElementsByTagName()
getElementById()
getAttribute()
setAttribute()
2.HTML-DOM
提供了一些更簡(jiǎn)明的記號(hào)來(lái)描述各種HTML 元素斥杜，但是只能用來(lái)處理Web文檔
eg：
document.froms; //HTML-DOM 提供了一個(gè)forms對(duì)象 獲取表單對(duì)象
element.src //獲取元素src屬性
3.CSS-DOM
針對(duì)CSS的操作试躏，作用主要是獲取和設(shè)置 style 對(duì)象的各種屬性
jQuery中的DOM操作
1.查找節(jié)點(diǎn)
查找元素節(jié)點(diǎn)裆装，也就是我們之前所說(shuō)的選擇器产禾，通過(guò)各種選擇器明棍，選出我們需要操作的節(jié)點(diǎn)
查找屬性節(jié)點(diǎn)乡革，通過(guò) jQuery 選擇器查找到元素后，可以使用attr() 方法來(lái)獲取和設(shè)置元素摊腋，當(dāng)參數(shù)為一個(gè)時(shí)（需要查詢的屬性名）為獲取元素沸版，當(dāng)參數(shù)為兩個(gè)時(shí)，為設(shè)置元素屬性值兴蒸。
eg：
var pText = $('p').attr('title'); //獲取元素的title值
$('p').attr('title','這是設(shè)置的title值'); //設(shè)置元素的title值
以下我都用一個(gè)例子說(shuō)明
DOM結(jié)構(gòu)：
<table id="table" cellspacing="0" border="l" cellpadding="5" width="500">
<thead>
<tr>
<th>水果</th>
<th>價(jià)格</th>
<th>Operation <a class="clearAll" href="#">清空表格</a></th>
</tr>
</thead>
<tbody>
<tr>
<td class="Tom">蘋果</td>
<td>18</td>
<td><a class="del" href="#">刪除</a> | <a class="addUp" href="#">向上添加一行</a> | <a class="addDown" href="#">向下添加一行</a></td>
</tr>
<tr>
<td>橘子</td>
<td>18</td>
<td><a class="del" href="#">刪除</a> | <a class="addUp" " href="#">向上添加一行</a> | <a class="addDown" href="#">向下添加一行</a> | <a class="moveLast" href="#">置底</a></td>
</tr>
<tr>
<td>香蕉</td>
<td>18</td>
<td><a class="del" href="#">刪除</a> | <a class="addUp" href="#">向上添加一行</a> | <a class="addDown" href="#">向下添加一行</a> | <a class="moveFirst" href="#">置頂</a></td>
</tr>
<tr >
<td><span>菠蘿</span></td>
<td>18</td>
<td><a class="del" href="#">刪除</a> | <a class="addUp" href="#">向上添加一行</a> | <a class="addDown" href="#">向下添加一行</a> | <a class="blod" href="#">加粗</a></td>
</tr>
</tbody>
</table>
2.創(chuàng)建節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)是使用jQuery 工廠函數(shù) $() 來(lái)完成
- $(html);
- 優(yōu)點(diǎn)： 支持復(fù)雜视粮，帶文本，屬性的html代碼
- eg橙凳，創(chuàng)建一個(gè)表格的一行
var newTr = $('<tr><td>草莓</td><td>18</td><td>這是添加的一行</td></tr>');
//為了方便易讀蕾殴，可以寫成以下
var newTr = $('<tr>'
+ '<td>草莓</td>'
+ '<td>18</td>'
+ '<td>這是添加的一行</td>'
+ '</tr>');
3.插入節(jié)點(diǎn)
3.1 append 與 appendTo
**append() **向每個(gè)匹配的元素追加內(nèi)容笑撞，在當(dāng)前操作的元素內(nèi)部尾部追加內(nèi)容。
$(A).append(B);把B元素追加到A中** appendTo()** ,
$(A).appendTo(B);把A追加到B中
例子中的置底操作就用了钓觉，先在當(dāng)前點(diǎn)擊的元素的父元素中找到 tr 元素茴肥，在把當(dāng)前行插入到tbody 的尾部
//置底操作
$('.moveLast').on('click', function(event) {
var $tr = $(this).parents('tr');
$tr.appendTo('tbody');
//等價(jià)與
$('tobdy').append($tr);
});
3.2 prepend 與 prependTo
**prepend() **向每個(gè)匹配的元素前置內(nèi)容，在當(dāng)前操作的元素內(nèi)部頭部追加內(nèi)容荡灾。
$(A).prepend(B);把B元素前置到A中** prependTo()** ,
$(A).prependTo(B);把A前置到B中
例子中的置頂操作就用了炉爆，先在當(dāng)前點(diǎn)擊的元素的父元素中找到 tr 元素，在把當(dāng)前行插入為tbody 的第一個(gè)元素
// 置頂操作
$('.moveFirst').on('click', function(event) {
var $tr = $(this).parents('tr');
$tr.prependTo('tbody');
// 等價(jià)于
$('tbody').prependTo($tr);
});
3.3 after 與 insertAfter
**after() **向每個(gè)匹配的元素之后插入內(nèi)容卧晓，在當(dāng)前元素外部芬首。
$(A).insert(B);把B元素插入到A之后** prependTo()** ,
$(A).insertAfter(B);把A插入到B元素后面
例子中的向下插入一行用到了這個(gè)方法，先創(chuàng)建元素newTr 逼裆，再插入到當(dāng)前行之后
//向下添加一行
$('.addDown').on('click', function(event) {
var newTr = $('<tr><td>草莓</td><td>18</td><td>這是添加的一行</td></tr>');
var $tr = $(this).parents('tr');
newTr.insertAfter($tr);
//等價(jià)于
$tr.after(newTr);
});
3.4 before 與 insertBefore
**before() **向每個(gè)匹配的元素之后插入內(nèi)容郁稍，在當(dāng)前元素外部。
$(A).insert(B);把B元素插入到A之前** prependTo()** ,
$(A).insertAfter(B);把A插入到B元素前面
例子中的向上插入一行用到了這個(gè)方法胜宇，先創(chuàng)建元素newTr 耀怜，再插入到當(dāng)前行之前
4. 刪除節(jié)點(diǎn)
remove() 從DOM中刪除所有匹配的元素，可以通過(guò)傳遞參數(shù)桐愉，選擇性刪除
detach() ,與romove 相同都是刪除元素财破，detach 刪除的元素保存后再次使用時(shí)，所有綁定的事件嗎从诲、附加的數(shù)據(jù)都會(huì)保留下來(lái)左痢。
empty是清空節(jié)點(diǎn)
//刪除操作
$('.del').on('click', function(event) {
$(this).parents('tr').remove();
});
//刪除全部
$('.clearAll').on('click', function(event) {
$('tbody').empty();
});
5.復(fù)制節(jié)點(diǎn)
clone(),不帶參數(shù)的去執(zhí)行復(fù)制操作，復(fù)制的元素節(jié)點(diǎn)是不帶事件的
clone(true), 復(fù)制元素的同時(shí)復(fù)制元素中所綁定的事件
6.包裹節(jié)點(diǎn)
wrapAll() ,所有匹配的元素用一個(gè)元素來(lái)包裹
wrap(),方法將所有的元素進(jìn)行單獨(dú)的包裹
wrapInner()系洛，方法將每一個(gè)匹配元素的子內(nèi)容包裹起來(lái)
//加粗 元素包裹 當(dāng)前行就會(huì)全部加粗
$('.blod').on('click', function(event) {
$(this).parents('tr').find('td').wrapInner('<b></b>');
});
