Question

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

这可能吗？

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

Answer 1

您可以使用.cloneNode(true)获取DOM的完整副本。像自定义属性这样的东西不会被复制。可能不是很大的问题，因为你应该使用data-属性和dataset属性，这将被克隆复制。

＆＃13;

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);

＆＃13;

pre {
  font-size: 1.4em;
}

＆＃13;

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

＆＃13;

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

Answer 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");

<p style="color: red;">paragraph one</p>

使用javascript制作文档对象副本的最简单方法是什么

2 个答案: