快捷導(dǎo)航

有關(guān)jquery與DOM節(jié)點(diǎn)操作方法和屬性記錄

更新時(shí)間：2016年04月15日 15:22:18 投稿：jingxian

下面小編就為大家?guī)硪黄嘘P(guān)jquery與DOM節(jié)點(diǎn)操作方法和屬性記錄。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考

網(wǎng)上找了份jquery的操作節(jié)點(diǎn)方法清單。如下：

方法	源包裝集/字串	目標(biāo)包裝集體	特性描述
A.append(B)	B	A	若目標(biāo)包裝集只匹配一個(gè)元素，則源(也包括同源包裝集匹配的所有元素)將被移動到目標(biāo)位置；若目標(biāo)包裝集包含多個(gè)元素，則源將保留在原來的位置，但同時(shí)復(fù)制一份相同的副本到目標(biāo)位置。由此，若目標(biāo)只匹配一個(gè)元素時(shí)，使用前述方法后源將被刪除。
B.appendTo(A)
A.prepend(B)
B.prependTo(A)
A.before(B)
B.insertBefore(A)
A.after(B)
B.insertAfter(A)

舉例說明：在以上表格中，A.append(B)表示把B添加到與A匹配的所有元素的現(xiàn)有內(nèi)容后面，因此B是源，A是目標(biāo)包裝集。

總結(jié)一句話就是：使用以上方法后，兩個(gè)節(jié)點(diǎn)變?yōu)橥壭值芄?jié)點(diǎn)

以下是DOM操作節(jié)點(diǎn)的方法匯總:

(1)appendChild方法，用于向childNodes列表的末尾添加一個(gè)節(jié)點(diǎn)

//將newNode添加到someNode的childNodes列表的末尾

var returnedNode = someNode.appendChild(newNode);

//將someNode的第一個(gè)子節(jié)點(diǎn)變?yōu)樽詈笠粋€(gè)子節(jié)點(diǎn)

var returnedNode = someNode.appendChild(someNode.firstChild);

(2)insertBefore方法，可以把節(jié)點(diǎn)放在childNodes列表中某個(gè)特定的位置上

//插入后成為最后一個(gè)子節(jié)點(diǎn)

returnedNode = someNode.insertBefore(newNode, null);//和appendChild效果相同

//插入后成為第一個(gè)子節(jié)點(diǎn)

returnedNode = someNode.insertBefor(newNode, someNode.firstChild);

(3)replaceChild方法用于替換子節(jié)點(diǎn)，接受兩個(gè)參數(shù)：要插入的子節(jié)點(diǎn)和要替換的子節(jié)點(diǎn)。要替換的子節(jié)點(diǎn)將從文檔樹中被移除，同時(shí)由要插入的子節(jié)點(diǎn)占據(jù)其位置

//替換第一個(gè)子節(jié)點(diǎn)

returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

(4)removeChild方法用于移除子節(jié)點(diǎn)

//移除第一個(gè)子節(jié)點(diǎn)

var formerFirstChild = someNode.removeChild(someNode.firstChild);

總結(jié)一句話就是：以上方法都是父節(jié)點(diǎn)操作子節(jié)點(diǎn)的

下圖給出了父子、兄弟節(jié)點(diǎn)的查找關(guān)系