【JavaScript】appendChild一个的注意点之会删除原dom树节点

最近在研究学习vue原理，其中使用createDocumentFragment()方法，是用来创建一个虚拟的节点对象，那问题来了，创建了虚拟dom树，且最后只渲染了虚拟dom树里面的节点，那原dom树的节点去哪里了，查阅了MDN等相关资料，发现是appendChild在搞搞震。

首先看一下MDN上对appendChild的定义：
Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用 Node.cloneNode() 方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用 cloneNode 制作的副本不会自动保持同步。

这下好了，就是appendChild在其中发挥了作用：使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原dom树的节点。

下面看个例子：

<div id='container'>title<p>content</p>
</div>

（1）此时不对container作任何dom操作，同时打印一下container的childNodes（此时NodeList(0)为text-title，页面将看到的是：

（2）然后写段js代码，将container的firstchild使用appendchild方法添加到DocumentFragment

 <script>var container = document.getElementById('container')var frag = document.createDocumentFragment();frag.appendChild(container.firstChild)</script>

（3）最后打印一下container的childNodes同时看看页面渲染结果：

（4）最后呈现出来的结果就是被我用appendchild方法操作的节点（类型：text，内容：“title”）在原dom树中被删除了。

【JavaScript】appendChild一个的注意点之会删除原dom树节点相关推荐

JavaScript之DOM树
一.什么是DOM树? DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素. DOM树是结构,所谓层级结构是指元素和元素之间的关系:父子,兄弟 ...
使用JavaScript写一个三级下拉框联动
使用JavaScript写一个三级下拉框联动首先我们需要确定思路,定义三个下拉框: 1.从后台获取包含的数组1.1定义数组2.将数组中的信息添加到下拉框中2.1遍历数组,将数组信息添加下拉框2.2每 ...
添加删除按钮html代码怎么写,JavaScript添加一个文本框并带有删除按钮
JavaScript添加一个文本框并带有删除按钮属于前端实例代码,有关更多实例代码大家可以查看. 实际操作中可能需要动态的创建和删除一个元素,比较常见是添加一个文本框和一个删除按钮,点击删除按钮可以删 ...
JavaScript 添加一个元素标签
JavaScript 添加一个元素标签文章目录 JavaScript 添加一个元素标签代码效果代码 <!DOCTYPE html> <html><head> ...
HTML+JavaScript实现一个简单抽奖功能
HTML+JavaScript实现一个简单抽奖功能 emmm,闲的蛋疼,没事做,软考也不想复习为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当 ...
html+css+javaScript实现一个简单的注册界面
html+css+javaScript实现一个简单的注册界面自学html,css,js也有一小段时间了,尝试着做点东西来巩固一下,就决定实现这个简单的注册界面.实现的注册界面很普通,没有加上华丽的装 ...
使用JavaScript实现一个简单的编译器
本文同步在个人博客shymean.com上,欢迎关注在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有将ES6.7代码编译成ES5的代码将SCSS.LESS代码转换成浏览器支持的CSS ...
HTML CSS JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
谷歌技术专家关于JavaScript的一个引人注目的观点
谷歌的一位技术专家曾经和我分享过关于 JavaScript 的一个引人注目的观点:它不是真正的内聚编程语言--至少不是正式意义上的内聚编程语言. ECMA-262规范定义了JavaScript,但没有 ...

【JavaScript】appendChild一个的注意点之会删除原dom树节点

【JavaScript】appendChild一个的注意点之会删除原dom树节点相关推荐

最新文章

热门文章