Javascript DOM树重复操作 [英] Javascript DOM tree duplicate for manipulation

问题描述

由于页面的DOM树是活动的并且始终反映在浏览器中，为了某种目的修改此DOM树而不影响实际渲染的树，最好的方法是什么？假设我的目的是交换某些子节点，并看看DOM树仍然保持相似。

创建一个重复的树是唯一的解决方案？如果是，有没有这样做的功能？或者我需要编写自己的函数来创建一个树的副本。我不需要元素对象的所有属性，所以我可以创建一个更简单的对象，其中有几个属性指向兄弟姐妹和孩子。

解决方案

您可以在另一个节点上使用 document.cloneNode（true）或相同的方法。 cloneNode 克隆任何节点，而 true 意味着它应该是递归的（深）。显然，这可能会在大页面上产生巨大的性能成本。

Since the DOM tree of a page is active and always reflected in the browser, what is the best way to modify this DOM tree for some purpose without affecting the actual rendered tree ? Let's say my purpose is to swap certain children nodes and see how similar the DOM tree still remains.

Is creating a duplicate tree the only solution ? If it is, is there a function to do this ? Or do I need to write my own function to create a duplicate copy of the tree. I won't need all the attributes of the element object, so I can create a simpler object with a few attributes that point to the siblings and children.

解决方案

You can use document.cloneNode(true), or the same method on another node. cloneNode clones any node, and the true means it should be recursive (deep). Obviously, this could have a significant performance cost on a large page.

这篇关于Javascript DOM树重复操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！