【EASYDOM系列教程】之替换节点

陈江龙发布于2019-08-20 18:34 / 1450人阅读

摘要：参数则表示页面中被替换的节点。方法的返回值也是被替换的节点，即。如果该节点已经存在于节点树结构中的话，则它会被从原始位置删除。但需要注明作者及来源，并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。

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系列教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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