上海网站改版服务,网站设计师前景,网站 哪些服务器,怎么做有趣的短视频网站最近在研究学习vue原理#xff0c;其中使用createDocumentFragment()方法#xff0c;是用来创建一个虚拟的节点对象#xff0c;那问题来了#xff0c;创建了虚拟dom树#xff0c;且最后只渲染了虚拟dom树里面的节点#xff0c;那原dom树的节点去哪里了#xff0c;查阅了…最近在研究学习vue原理其中使用createDocumentFragment()方法是用来创建一个虚拟的节点对象那问题来了创建了虚拟dom树且最后只渲染了虚拟dom树里面的节点那原dom树的节点去哪里了查阅了MDN等相关资料发现是appendChild在搞搞震。 首先看一下MDN上对appendChild的定义 Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中那么 appendChild() 只会将它从原先的位置移动到新的位置不需要事先移除要移动的节点。
这意味着一个节点不可能同时出现在文档的不同位置。所以如果某个节点已经拥有父节点在被传递给此方法后它首先会被移除再被插入到新的位置。若要保留已在文档中的节点可以先使用 Node.cloneNode() 方法来为它创建一个副本再将副本附加到目标父节点下。请注意用 cloneNode 制作的副本不会自动保持同步。
这下好了就是appendChild在其中发挥了作用使用appendChid方法将原dom树中的节点添加到DocumentFragment中时会删除原dom树的节点。 下面看个例子
div idcontainertitlepcontent/p
/div1此时不对container作任何dom操作同时打印一下container的childNodes此时NodeList(0)为text-title页面将看到的是 2然后写段js代码将container的firstchild使用appendchild方法添加到DocumentFragment scriptvar container document.getElementById(container)var frag document.createDocumentFragment();frag.appendChild(container.firstChild)/script3最后打印一下container的childNodes同时看看页面渲染结果 4最后呈现出来的结果就是被我用appendchild方法操作的节点类型text内容“title”在原dom树中被删除了。
