仅使用 javascript 复制文档对象的最简单方法是什么答案

【问题标题】：what is the easiest way to make a copy of document object with javascript only仅使用 javascript 复制文档对象的最简单方法是什么
【发布时间】：2018-02-07 08:35:52
【问题描述】：

文档对象的副本在复制后应该像 ... 文档对象一样，但完全脱离实际的 dom 引用。我的意思是——如果我们将这个文档副本保存为var documentCopy，documentCopy 应该能够像document 一样在其自身上运行.getElementsByClass('xx')，但对其进行修改不会影响原始@ 987654324@对象。

这可能吗？

我对除 jQuery 之外的所有库开放。

【问题讨论】：

真正的问题是你到底为什么需要这样的东西？
@adeneo 生成pdf文档
将它保存在一个函数中，在外部作用域中引用它。但不是那样工作，实际的 dom 仍然被引用
如果您提供一些有关您的预期目的的详细信息，可能有比尝试在 javascript 中复制文档对象更好的方法。
@Ezeewei 以及克隆 document 将如何帮助您生成 pdf 文档？

标签： javascript object clone document

【解决方案1】：

您可以使用.cloneNode(true) 获取 DOM 的完整副本。但是，某些内容（例如自定义属性）不会被复制。可能不是什么大问题，因为无论如何您都应该使用 data- 属性和 dataset 属性，这将与克隆一起复制。

var pre = document.querySelector("pre");

// custom properties will not get cloned
pre.customProp = "foobar";

// data- attributes/properties will get cloned
pre.dataset.foo = "bar";

// clone the document
var documentCopy = document.cloneNode(true);

// show that DOM selection works on the copy
console.log("clone found ", documentCopy.getElementsByClassName("foo").length, "'foo' nodes");

// the custom property did not get cloned
console.log("custom prop:", documentCopy.querySelector("pre").customProp);

// but the dataset property did
console.log("dataset prop:", documentCopy.querySelector("pre").dataset.foo);

pre {
  font-size: 1.4em;
}

<div class="foo"></div>
<div class="foo"></div>

<pre></pre>

true 参数使其成为深层副本，而不仅仅是克隆外部元素。

【讨论】：

【解决方案2】：

document 关键字将为您提供文档的reference——而不是副本。因此，在您的示例中，对 documentCopy 的更改会影响原始文档。

在底层，浏览器将文档层次结构维护为链接的“节点”对象，因此没有一种很好的方法来“复制”所有对象及其当前状态。

为了获取节点对象的新“副本”，您需要将其 HTML 内容作为字符串获取，然后使用该 HTML 标记将新节点插入 DOM：

// get the original body HTML
var bodyHTML = document.body.innerHTML;

// create a new div and set its contents
var copiedNode = document.createElement("div");
copiedNode.innerHTML = bodyHTML;

// inser the new nodes
document.body.appendChild(copiedNode);

// modify the copied nodes
copiedNode.firstElementChild.setAttribute("style", "color: blue");

&lt;p style="color: red;"&gt;paragraph one&lt;/p&gt;

【讨论】：