【EASYDOM系列教程】之替換節(jié)點(diǎn)

陳江龍發(fā)布于2019-08-20 18:34 / 1481人閱讀

摘要：參數(shù)則表示頁面中被替換的節(jié)點(diǎn)。方法的返回值也是被替換的節(jié)點(diǎn)，即。如果該節(jié)點(diǎn)已經(jīng)存在于節(jié)點(diǎn)樹結(jié)構(gòu)中的話，則它會(huì)被從原始位置刪除。但需要注明作者及來源，并且不能用于商業(yè)。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國際許可協(xié)議進(jìn)行許可。

Node 對(duì)象提供了 replaceChild() 方法實(shí)現(xiàn) HTML 頁面中節(jié)點(diǎn)的替換功能。其語法結(jié)構(gòu)如下:

replacedNode = parentNode.replaceChild(newChild, oldChild);

在上述語法結(jié)構(gòu)中，調(diào)用 replaceChild() 方法的 parentNode 表示被替換節(jié)點(diǎn) oldChild 的父級(jí)節(jié)點(diǎn)。

參數(shù) oldChild 則表示 HTML 頁面中被替換的節(jié)點(diǎn)。replaceChild() 方法的返回值也是被替換的節(jié)點(diǎn)，即 oldChild == replaceNode。

參數(shù) newChild 則表示用于替換的新節(jié)點(diǎn)。如果該節(jié)點(diǎn)已經(jīng)存在于 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)中的話，則它會(huì)被從原始位置刪除。

我們可以通過如下代碼示例，測試 replaceChild() 方法的具體使用:

// 獲取父節(jié)點(diǎn)
var parentNode = document.getElementById("parent");
// 創(chuàng)建新節(jié)點(diǎn)
var newChild = document.createElement("button");
newChild.setAttribute("class","button");
var text = document.createTextNode("A New Button");
newChild.appendChild(text);
// 獲取子節(jié)點(diǎn)
var oldChild = document.getElementById("btn");
// 替換節(jié)點(diǎn)
parentNode.replaceChild(newChild, oldChild);

本教程免費(fèi)開源，任何人都可以免費(fèi)學(xué)習(xí)、分享，甚至可以進(jìn)行修改。但需要注明作者及來源，并且不能用于商業(yè)。

本教程采用知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國際許可協(xié)議進(jìn)行許可。

GPU云服務(wù)器云服務(wù)器系列之系列之二架構(gòu)之坑系列 linux系列教程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84690.html

相關(guān)文章

【EASYDOM系列教程】之 textContent 屬性

摘要：獲取文本內(nèi)容屬性表示頁面指定節(jié)點(diǎn)及其后代節(jié)點(diǎn)的文本內(nèi)容。需要說明的是，在上述語法結(jié)構(gòu)中，調(diào)用屬性的表示元素節(jié)點(diǎn)。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國際許可協(xié)議進(jìn)行許可。 Node 對(duì)象提供了 textContent 屬性實(shí)現(xiàn)獲取或設(shè)置 HTML 頁面中指定元素的文本內(nèi)容。獲取文本內(nèi)容 textContent 屬性表示 HTML 頁面指定節(jié)點(diǎn)及其后代節(jié)點(diǎn)的文本內(nèi)容。其語法格式如...

neuSnail 2019-08-21 11:51 評(píng)論0 收藏0
【EASYDOM系列教程】之Node介紹

摘要：對(duì)象的作用樹結(jié)構(gòu)主要是依靠節(jié)點(diǎn)進(jìn)行解析，稱為節(jié)點(diǎn)樹結(jié)構(gòu)。對(duì)象的繼承鏈關(guān)系對(duì)象是繼承于對(duì)象的，是一個(gè)用于接收事件的對(duì)象。但需要注明作者及來源，并且不能用于商業(yè)。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國際許可協(xié)議進(jìn)行許可。 DOM 的標(biāo)準(zhǔn)規(guī)范中提供了 Node 對(duì)象，該對(duì)象主要提供了用于解析 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)的屬性和方法。 Node 對(duì)象的作用 DOM 樹結(jié)構(gòu)主要是依靠節(jié)點(diǎn)進(jìn)行解析，...

oliverhuang 2019-08-20 18:16 評(píng)論0 收藏0
【EASYDOM系列教程】之 innerHTML 屬性

摘要：對(duì)象提供了屬性用于實(shí)現(xiàn)獲取或設(shè)置頁面指定元素的代碼。需要說明的是，在上述語法結(jié)構(gòu)中，調(diào)用屬性的表示元素節(jié)點(diǎn)。但需要注明作者及來源，并且不能用于商業(yè)。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國際許可協(xié)議進(jìn)行許可。 Element 對(duì)象提供了 innerHTML 屬性用于實(shí)現(xiàn)獲取或設(shè)置 HTML 頁面指定元素的 HTML 代碼。獲取 HTML 代碼 innerHTML 屬性表示 HTM...

劉福 2019-08-21 11:59 評(píng)論0 收藏0
【EASYDOM系列教程】之遍歷節(jié)點(diǎn)

摘要：對(duì)象提供了一系列的屬性和方法用來利用節(jié)點(diǎn)樹結(jié)構(gòu)中節(jié)點(diǎn)的關(guān)系實(shí)現(xiàn)遍歷其中的節(jié)點(diǎn)。在上述語法結(jié)構(gòu)中，屬性返回指定節(jié)點(diǎn)的父元素節(jié)點(diǎn)。該屬性獲取一個(gè)包含指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)的集合。值得注意的是及之前版本的瀏覽器中不存在空白節(jié)點(diǎn)問題。 Node 對(duì)象提供了一系列的屬性和方法用來利用 DOM 節(jié)點(diǎn)樹結(jié)構(gòu)中節(jié)點(diǎn)的關(guān)系實(shí)現(xiàn)遍歷其中的節(jié)點(diǎn)。關(guān)于節(jié)點(diǎn)之間的關(guān)系，可以參考《DOM樹結(jié)構(gòu)》一節(jié)有關(guān)節(jié)點(diǎn)之間關(guān)...

BigNerdCoding 2019-08-20 18:18 評(píng)論0 收藏0
【EASYDOM系列教程】索引

摘要：系列教程是一套免費(fèi)開源，任何人都可以免費(fèi)學(xué)習(xí)分享，甚至可以進(jìn)行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開始，我們先來了解是什么的作用，以及瀏覽器的支持是怎么樣的。《EASYDOM》系列教程是一套免費(fèi)、開源，任何人都可以免費(fèi)學(xué)習(xí)、分享，甚至可以進(jìn)行修改。但需要注明作者及來源，并且不能用于商業(yè)。本文是這套系列教程的索引（也就是目錄）: 第一回 DOM 介紹在最開始，我...

yanwei 2019-08-21 11:51 評(píng)論0 收藏0