javascriptのみでドキュメントオブジェクトのコピーを作成する最も簡単な方法は何ですか

Question

ドキュメントオブジェクトのコピーは...ドキュメントオブジェクトのように動作するはずですが、実際のDOMリファレンスから完全に切り離されています。つまり、var documentCopyというドキュメントコピーを保存すると、documentと同じように.getElementsByClass('xx')を実行することができますが、その変更は元のdocumentオブジェクトには影響しません。

これは可能ですか？

jQueryを除くすべてのライブラリに公開されています。

Answer 1

.cloneNode(true)を使用すると、DOMの完全なコピーを取得できます。カスタムプロパティのようなものはコピーされません。あなたはdata-アトリビュートとdatasetアトリビュートを使用する必要があるので、クローンと一緒にコピーされるので、問題はあまりないでしょう。

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

pre { 
 
    font-size: 1.4em; 
 
}

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

 
<pre></pre>

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>