web-dev-qa-db-ja.com

Document.importNode VS Node.cloneNode（実際の例）

仕様のDocument.importNode

Node.cloneNode in specification

この2つの方法は同等に機能します。この方法の違いがわかる実例を教えてください。

javascripthtmldomw3c
33
Iaroslav Baranov

Web互換性により、ノードを別のドキュメントに挿入する前に暗黙的にadoptNode()がブラウザに強制された であるため、Alohciは正しい。

前にクローンされたノードを新しいドキュメントに挿入する前に、違いがあります：cloneNode(original)によって返されるノードの所有者ドキュメントは元のノードと同じです。newDocument.importNode(original)を呼び出すと、新しいドキュメントになります。 ownerDocumentまたは関連プロパティ（baseURIなど）を使用すると、この違いを確認できます。

ただし、元のノードが属しているのと同じドキュメントでimportNodeを呼び出しても、違いはありません。

21
Nickolay

簡単に言えば：

element.cloneNode()は、現在のdocumentからノードを複製するために使用されます。たとえば、templateなどのDOM要素を追加するときにシャドウDOMを使用します。そこで、shadowDOM.appendChild(template.content.cloneNode(true))を呼び出します。ここで、templateは、HTMLで定義されている_<template>_のインスタンスです。ここでは、現在のDOMから要素を取得してシャドウDOMに追加するようにJSに指示しています。

document.importNode()は、別のドキュメントからノードを複製するために使用されます。たとえば、独自のDOMを持つ_<iframe>_を使用して、iframeからの要素をDOMに表示します。

_var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.importNode(h);
_

document.adoptNode()はimportNode()によく似た別のメソッドですが、親DOMから元の要素を削除する点が異なります。 importNode()は元の要素を削除せずにコピーしますが、adoptNode()は元の要素をDOMから完全に削除します。

_var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(h);
_
4
patrick.1729