Fatal编程技术网
  • javascript/
  • JavaScript：复制文档DOM而不引用

JavaScript：复制文档DOM而不引用

javascript dom

JavaScript：复制文档DOM而不引用,javascript,dom,Javascript,Dom,是否可以在没有引用的情况下复制文档DOM（或其一部分） 例如： BodyCopy = document.body; document.body.querySelector('#example').innerHTML = '<p>foo</p>'; BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>'; // will output <p>bar</p>, b

是否可以在没有引用的情况下复制文档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);

BodyCopy=document.body；
document.body.querySelector（“#示例”）.innerHTML=”foo
”；
BodyCopy.querySelector（“#示例”）.innerHTML=”bar
”；
//将输出bar
，但应为foo

log（document.body.querySelector（“#示例”）.innerHTML）；
//将输出bar

log（BodyCopy.querySelector（“#示例”）.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);

BodyCopy=document.body.cloneNode（true）；
document.body.querySelector（“#示例”）.innerHTML=”foo
”；
BodyCopy.querySelector（“#示例”）.innerHTML=”bar
”；
//将输出foo

log（document.body.querySelector（“#示例”）.innerHTML）；
//将输出bar

log（BodyCopy.querySelector（“#示例”）.innerHTML）；
//显示编辑的副本
document.body=BodyCopy；
document.body.querySelector（“#示例”）.innerHTML=”foo
”；
BodyCopy.querySelector（“#示例”）.innerHTML=”bar
”；
//将输出bar
，但应为foo

log（document.body.querySelector（“#示例”）.innerHTML）；
//将输出bar

log（BodyCopy.querySelector（“#示例”）.innerHTML）；
它不会像我预期的那样工作。请参阅。

在执行修改之前，您需要：

BodyCopy = document.body.cloneNode(true);
现在你有了一份副本而不是参考资料

编辑

如果要将旧的
document.body
替换为新的
BodyCopy
，则应修改其内容，而不是其引用：

document.body.innerHTML = BodyCopy.innerHtml;
在执行修改之前，您需要执行以下操作：

BodyCopy = document.body.cloneNode(true);
现在你有了一份副本而不是参考资料

编辑

如果要将旧的
document.body
替换为新的
BodyCopy
，则应修改其内容，而不是其引用：

document.body.innerHTML = BodyCopy.innerHtml;
您没有在任何地方复制DOM，而是将
document.body
赋值给名为
BodyCopy
的变量

您需要在作业中使用：

BodyCopy = document.body.cloneNode(true);

var BodyCopy=document.body.cloneNode（true）；
document.body.querySelector（“#示例”）.innerHTML=”foo
”；
BodyCopy.querySelector（“#示例”）.innerHTML=”bar
”；
//现在输出foo

log（document.body.querySelector（“#示例”）.innerHTML）；
//现在输出条

log（BodyCopy.querySelector（“#示例”）.innerHTML）；

您不是在任何地方复制DOM，而是将
document.body
赋值给名为
BodyCopy
的变量

您需要在作业中使用：

BodyCopy = document.body.cloneNode(true);

var BodyCopy=document.body.cloneNode（true）；
document.body.querySelector（“#示例”）.innerHTML=”foo
”；
BodyCopy.querySelector（“#示例”）.innerHTML=”bar
”；
//现在输出foo

log（document.body.querySelector（“#示例”）.innerHTML）；
//现在输出条

log（BodyCopy.querySelector（“#示例”）.innerHTML）；

如果要替换节点，请使用或

这就是应该如何根据html规范实现的

如果你想让副本独立于新内容，你必须在替换旧内容之前再次克隆它

应尽可能避免操纵innerHTML，因为它必须通过HTML序列化程序和解析器对节点进行往返操作

如果要替换节点，请使用或

这就是应该如何根据html规范实现的

如果你想让副本独立于新内容，你必须在替换旧内容之前再次克隆它

应尽可能避免操纵innerHTML，因为它必须通过HTML序列化程序和解析器往返于节点。

是的，有节点克隆，但id相同。因此，它将给出相同的结果behaviur@RIYAJKHAN不，不会，因为您在完全不同的元素上运行选择器。请参阅我答案中的JSFIDLE演示。@Kiltarc我不知道您为什么要这样做。如果您打算在流程结束时用您的“工作副本”替换它，为什么不直接使用
document.body
？您怎么会这样想？无论如何，您都是使用克隆的
body
节点执行这些操作，然后将所有内容写回
document.body
。不，您错了。两者都在记忆中。只修改
body
DOM节点要比对其执行多个读/写操作性能好得多。是的，可以克隆节点，但id相同。因此，它将给出相同的结果behaviur@RIYAJKHAN不，不会，因为您在完全不同的元素上运行选择器。请参阅我答案中的JSFIDLE演示。@Kiltarc我不知道您为什么要这样做。如果您打算在流程结束时用您的“工作副本”替换它，为什么不直接使用
document.body
？您怎么会这样想？无论如何，您都是使用克隆的
body
节点执行这些操作，然后将所有内容写回
document.body
。不，您错了。两者都在记忆中。只修改
主体
DOM节点要比对其执行多个读/写操作性能好得多。您是要在DOM中附加克隆节点，还是替换现有节点，还是只在js中使用它？我将克隆它，编辑克隆的节点并多次替换它。一份副本应保存原件，一份副本用于编辑，真实文档（
document.body
）应包含用户应看到的内容。您是要在dom中附加克隆节点，还是替换现有节点，还是只在js中使用它？我将克隆它，编辑克隆的节点并多次替换它。一份副本应保存原件，一份副本用于编辑，真实文档（
document.body
）应包含用户应看到的内容。谢谢，但显示编辑副本后的更改
document.body=BodyCopy<