caoporm97国产在线视频|欧美性XXXXX精品|一本一道久久a久久精品综合开|精品久久久久久久久久久AⅤ|

十年專注于品牌網(wǎng)站建設(shè) 十余年專注于網(wǎng)站建設(shè)_小程序開發(fā)_APP開發(fā),低調(diào)、敢創(chuàng)新、有情懷!
南昌百恒網(wǎng)絡(luò)微信公眾號(hào) 掃一掃關(guān)注
小程序
tel-icon全國(guó)服務(wù)熱線:400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
掃一掃打開百恒網(wǎng)絡(luò)微信小程序

百恒網(wǎng)絡(luò)

南昌百恒網(wǎng)絡(luò)

節(jié)點(diǎn)添加、插入和替換操作appendChild()、insertBefore()、replaceChild()

百恒網(wǎng)絡(luò) 2013-09-04 6539

在交互網(wǎng)頁(yè)中,我們需要?jiǎng)討B(tài)地添加一些對(duì)象,例如:如用戶鼠標(biāo)移到某處,出現(xiàn)相應(yīng)提示或?qū)υ?類似于這樣的功能,網(wǎng)站開發(fā)人員肯定需要添加元素,我們常用的是appendChild(),接下來(lái)南昌網(wǎng)站設(shè)計(jì)公司技術(shù)人員對(duì)大家詳細(xì)介紹.

DOM提供了一些操作節(jié)點(diǎn)的方法。其中,最常用的方法是appendChild(),用于向childNodes列表的末尾添加一個(gè)節(jié)點(diǎn)。添加節(jié)點(diǎn)后,childNodes的新增節(jié)點(diǎn)、父節(jié)點(diǎn)及以前的最后一個(gè)子節(jié)點(diǎn)的關(guān)系指針都會(huì)相應(yīng)地得到更新。更新完成后,appendChild()返回新增的節(jié)點(diǎn)。來(lái)看下面的例子:

var returnedNode=someNode.appendChild (newNode);

alert (returnedNode==newNode); //true

alert( someNode.las tChild==newNode); //true

如果傳人到appendChild()中的節(jié)點(diǎn)已經(jīng)是文檔的一部分了,那結(jié)果就是將該節(jié)點(diǎn)從原來(lái)的位置轉(zhuǎn)移到新位置。即使可以將DOM樹看成是由一系列指針連接起來(lái)的,但任何DOM節(jié)點(diǎn)也不能同時(shí)出現(xiàn)在文檔中的多個(gè)位置上。因此,如果在調(diào)用appendChild()時(shí)傳人了父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn),那么該節(jié)點(diǎn)就會(huì)成為父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn),如下面的例子所示:

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

alert( returnedNode==someNode.firs tChild); //false

alert(returnedNode==someNodelastChild); //true

如果需要把節(jié)點(diǎn)放在childNodes列表中某個(gè)特定的位置上,而不是放在末尾,那么可以使用insertBefore()方法。這個(gè)方法接受兩個(gè)參數(shù):要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。插入節(jié)點(diǎn)后,被插入的節(jié)點(diǎn)會(huì)變成參照節(jié)點(diǎn)的前一個(gè)同胞節(jié)點(diǎn)(previousSibling),同時(shí)被方法返回。如果參照節(jié)點(diǎn)是null,則insertBefore()與appendChild()執(zhí)行相同的操作,如下面的例子所示:

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

returnedNode=someNode.insertBefore (newNode, null);

alert(newNode==someNode.lastChild); //true

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

var returnedNode=someNode.insertBefore (newNode, someNode.firstChild);

alert(re七urnedNode==newNode); //true

alert(newNode==someNode.firstChild); //true

//插入到最后一個(gè)子節(jié)點(diǎn)前面

returnedNode:someNode.insertBefore(newNode, someNode.lastChild);

alert(newNode==someNode.childNodes(someNode.childNodes.length-2]);//true

前面介紹的appendChild()和insertBefore()方法都只插入節(jié)點(diǎn),不會(huì)移除節(jié)點(diǎn)。而下面要介紹的replaceChild()方法接受的兩個(gè)參數(shù)是:要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)。要替換的節(jié)點(diǎn)將由這.

方法返回并從文檔樹中被移除,同時(shí)由要插入的節(jié)點(diǎn)占據(jù)其位置。來(lái)看下面的例子:

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

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

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

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

在使用replaceChild()插入一個(gè)節(jié)點(diǎn)時(shí),該節(jié)點(diǎn)的所有關(guān)系指針都會(huì)從被它替換的節(jié)點(diǎn)復(fù)制過(guò)盡管從技術(shù)上講,被替換的節(jié)點(diǎn)仍然還在文檔中,但它在文檔中已經(jīng)沒有了自己的位置。

如果只想移除而非替換節(jié)點(diǎn),可以使用removeChild()方法。這個(gè)方法接受一個(gè)參數(shù),即要移除節(jié)點(diǎn)。被移除的節(jié)點(diǎn)將成為方法的返回值,如下面的例子所示:

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

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

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

var formerLastChild=someNode.removeChild( someNode.las tChild);

與使用replaceChild()方法一樣,通過(guò)removeChild()移除的節(jié)點(diǎn)仍然為文檔所有,只不過(guò)在文檔中已經(jīng)沒有自己的位置。

前面介紹的四個(gè)方法操作的都是某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn),也就是說(shuō),要使用這幾個(gè)方法必須先取得父節(jié)點(diǎn)(使用parentNode屬性)。另外,并不是所有類型的節(jié)點(diǎn)都有子節(jié)點(diǎn),如果在不支持子節(jié)點(diǎn)的節(jié)點(diǎn)上調(diào)用了這些方法,將會(huì)導(dǎo)致錯(cuò)誤發(fā)生。

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http://m.gimmickmag.com 如轉(zhuǎn)載請(qǐng)注明出處!

400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
掃一掃打開百恒網(wǎng)絡(luò)小程序

歡迎您的光顧,我們將竭誠(chéng)為您服務(wù)×

售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售后服務(wù) 售后服務(wù)
 
售后服務(wù) 售后服務(wù)
 
備案專線 備案專線
 
×