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。

是否可以在没有参考的情况下复制文档DOM（或其一部分）？例如：BodyCopy = document.body; document.body.querySelector（'＃example'）。innerHTML ='

foo

'; ...

Answer 1

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

Answer 2

您没有将DOM复制到任何地方，而是将

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

分配给名为body setter function的变量。

Answer 3

进行修改之前，您需要BodyCopy = document.body.cloneNode(true); ：