JavaScript：在没有参考的情况下复制文档 DOM

Question

是否可以在没有参考的情况下复制文档 DOM（或其中的一部分）？

例如：

BodyCopy = document.body;
document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>bar</p>, but should be <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

更新：

好的，clondeNode() 似乎首先起作用，但如果我这样做

BodyCopy = document.body.cloneNode(true);
document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

// Show edited copy
document.body = BodyCopy;

document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>bar</p>, but should be <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

它不会像我预期的那样工作。 请参阅JSFiddle 。

Answer 1

您不是在任何地方复制 DOM，而是将document.body分配给一个名为BodyCopy的变量。

您需要在分配中使用cloneNode() ：

BodyCopy = document.body.cloneNode(true);

---

var BodyCopy = document.body.cloneNode(true);
document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// Now outputs <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// Now outputs <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

jsFiddle 演示

Answer 2

BodyCopy = document.body.cloneNode(true); // ... document.body = BodyCopy;

如果要替换节点，请使用parent.replaceChild(newChild, oldChild)或child.replaceWith(newChild) 。

let rootNode = document.documentElement;
let currentBody = document.body;
rootNode.replaceChild(BodyCopy, currentBody);

无论如何，这应该如何根据 html 规范来实现body setter 函数。

如果您想保持副本独立于新内容，则必须在替换旧内容之前再次克隆它；

应尽可能避免操作 innerHTML，因为它必须通过 HTML 序列化器和解析器来回传输节点。

Answer 3

您需要在执行修改之前克隆节点：

BodyCopy = document.body.cloneNode(true);

现在你有一个副本而不是一个参考。

编辑

如果你想用新的BodyCopy替换旧的document.body ，你应该修改它的内容而不是它的引用：

document.body.innerHTML = BodyCopy.innerHtml;