【EASYDOM系列教程】之删除节点

zzbo 发布于2019-08-20 18:23 / 1115人阅读

摘要：对象提供了方法实现从页面中删除指定节点。其语法结构如下在上述语法结构中，调用方法的表示参数的父节点，而参数则表示要删除的那个节点。则用于存储要删除的节点的引用，即。

Node 对象提供了 removeChild() 方法实现从 HTML 页面中删除指定节点。其语法结构如下:

var oldChild = node.removeChild(child);
OR
element.removeChild(child);

在上述语法结构中，调用 removeChild() 方法的 node 表示 child 参数的父节点，而 child 参数则表示要删除的那个节点。

oldChild 则用于存储要删除的节点的引用，即 oldChild === child。当然，如果我们需要完成的仅仅只是删除节点操作的话，并不需要定义变量来存储被删除的节点。

值得注意的是: 在上述语法结构中，如果 child 参数不是 node 的子节点的话，调用该方法时会报错。

我们可以通过如下代码示例，测试 removeChild() 方法的具体使用:

// 获取父节点
var parent = document.getElementById("parent");
// 获取子节点
var child = document.getElementById("btn");
// 删除节点
parent.removeChild(child);

值得注意的是: 被删除的节点是否从内存中被销毁，Mozilla 社区有这样一段描述:

被移除的这个子节点仍然存在于内存中，只是没有添加到当前文档的 DOM 树中。

因此，你还可以把这个节点重新添加回文档中。当然，实现要用另外一个变量比如上述语法中的 oldChild 来保存这个节点的引用。

如果使用上述语法中的第二种方法，即没有使用 oldChild 来保存对这个节点的引用，则认为被移除的节点已经是无用的，在短时间内将会被内存管理回收。

根据 Mozilla 社区对 removeChild() 方法的描述，我们可以进行如下代码示例的尝试:

// 获取父节点
var parent = document.getElementById("parent");
// 获取子节点
var child = document.getElementById("btn");
// 删除节点，并将删除的节点存储在 oldChild 变量中
var oldChild = parent.removeChild(child);
// 将删除的节点再添加到父节点的子节点列表中
parent.appendChild(oldChild);

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

GPU云服务器云服务器系列之系列之二架构之坑系列 linux系列教程

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

转载请注明本文地址：https://www.ucloud.cn/yun/84437.html

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

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

陈江龙 2019-08-20 18:34 评论0 收藏0
【EASYDOM系列教程】之 textContent 属性

摘要：获取文本内容属性表示页面指定节点及其后代节点的文本内容。需要说明的是，在上述语法结构中，调用属性的表示元素节点。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 Node 对象提供了 textContent 属性实现获取或设置 HTML 页面中指定元素的文本内容。获取文本内容 textContent 属性表示 HTML 页面指定节点及其后代节点的文本内容。其语法格式如...

neuSnail 2019-08-21 11:51 评论0 收藏0
【EASYDOM系列教程】之属性操作

摘要：对象提供了一些方法实现元素的属性操作，这种操作要比对象提供的方法操作属性节点要更便捷。值得注意的是如果指定的属性不存在，则返回或空字符串。如果删除的属性不存在的话，不会引发任何异常。 Element 对象提供了一些方法实现 HTML 元素的属性操作，这种操作要比 Node 对象提供的方法操作属性节点要更便捷。获取指定元素的属性 Element 对象提供了 getAttribute()...

BigNerdCoding 2019-08-21 11:59 评论0 收藏0
【EASYDOM系列教程】之 innerHTML 属性

摘要：对象提供了属性用于实现获取或设置页面指定元素的代码。需要说明的是，在上述语法结构中，调用属性的表示元素节点。但需要注明作者及来源，并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 Element 对象提供了 innerHTML 属性用于实现获取或设置 HTML 页面指定元素的 HTML 代码。获取 HTML 代码 innerHTML 属性表示 HTM...

刘福 2019-08-21 11:59 评论0 收藏0
【EASYDOM系列教程】之复制节点

摘要：也就是说，它没有父节点。如果参数设为，则不克隆它的任何子节点。为了防止一个文档中出现两个重复的元素使用方法克隆的节点在需要时应该指定另外一个与原值不同的。 Node 对象提供了 cloneNode() 方法实现 HTML 页面中节点的复制功能。其语法结构如下: var dupNode = node.cloneNode(deep); 在上述语法结构中，调用 cloneNode() 方法的...

Panda 2019-08-21 11:50 评论0 收藏0