【EASYDOM系列教程】之替換節點

陳江龍發布于2019-08-20 18:34 / 1475人閱讀

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

Node 對象提供了 replaceChild() 方法實現 HTML 頁面中節點的替換功能。其語法結構如下:

replacedNode = parentNode.replaceChild(newChild, oldChild);

在上述語法結構中，調用 replaceChild() 方法的 parentNode 表示被替換節點 oldChild 的父級節點。

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

參數 newChild 則表示用于替換的新節點。如果該節點已經存在于 DOM 節點樹結構中的話，則它會被從原始位置刪除。

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

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

本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。

本教程采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

云服務器 GPU云服務器系列之系列之二架構之坑系列 linux系列教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84690.html

【EASYDOM系列教程】之 textContent 屬性

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

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

摘要：對象的作用樹結構主要是依靠節點進行解析，稱為節點樹結構。對象的繼承鏈關系對象是繼承于對象的，是一個用于接收事件的對象。但需要注明作者及來源，并且不能用于商業。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 DOM 的標準規范中提供了 Node 對象，該對象主要提供了用于解析 DOM 節點樹結構的屬性和方法。 Node 對象的作用 DOM 樹結構主要是依靠節點進行解析，...

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

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

劉福 2019-08-21 11:59 評論0 收藏0
【EASYDOM系列教程】之遍歷節點

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

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

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

yanwei 2019-08-21 11:51 評論0 收藏0