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 Demo