DOM

Document.importNode() メソッド

 編集:2022.09.03 by T.A.

後で現在の文書に挿入するために、他の文書から Node または DocumentFragment の複製を作成します。

インポートされたノードは、まだ文書ツリーには含まれません。これを含めるには、Node.appendChild()Node.insertBefore() のような挿入メソッドを、現在の文書ツリーに存在するノードに対して呼び出す必要があります。

document.adoptNode() とは異なり、元の文書から元のノードは削除されません。インポートされたノードは元のノードの複製です。

構文
Document.importNode(externalNode[, deep])
Document Document
externalNode 現在の文書にインポートする、外部の Node または DocumentFragment です。
deep 省略可。論理値のフラグで、既定値は false であり、externalNode の DOM サブ ツリー全体をインポートするかどうかを制御します。

deep が true に設定された場合、externalNode およびその子孫全てが複製されます。

deep が false に設定された場合、externalNode のみがインポートされます ― 新しいノードには子ノードはない状態になります。

戻り値

インポートする側の文書のスコープにコピーされた importedNode¶ です。

Note: importedNode の Node.parentNode は null になります。まだ文書ツリーに挿入されていないからです。

const iframe  = document.querySelector("iframe");
const oldNode = iframe.contentWindow.document.getElementById("myNode");
const newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

エラー発生:Blocked a frame with origin "null" from accessing a cross-origin frame.

メモ

外部文書からのノードは、現在の文書に挿入する前に、次のいずれかの状態にしなければなりません。

Note: Firefox は今のところこのルールを強制していませんが、将来の互換性を改善するために、このルールに従うことを強く推奨します。

Node.ownerDocument の問題に関して詳しくは、W3C DOM FAQ を参照してください。


テスト