Document.importNode()

Document オブジェクトの importNode() メソッドは、後で現在の文書に挿入するために、他の文書から Node または DocumentFragment の複製を作成します。

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

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

構文

const importedNode = document.importNode(externalNode [, deep]);

引数

externalNode
現在の文書にインポートする、外部の Node または DocumentFragment です。
deep 省略可
論理値で、 externalNode の DOM サブツリー全体をインポートするかどうかを制御します。
  • deeptrue に設定された場合、 externalNode およびその子孫全てが複製されます。
  • deepfalse に設定された場合、 externalNode のみがインポートされます — 新しいノードには子ノードはない状態になります。

中: DOM4 仕様書では、 deep 羽オプションの引数で、既定値は true でした。

最新の仕様書ではこの既定値が変更されました。新しい既定値は false になりました。

おすすめの方法: これは現在もオプションの引数ですが、常に deep 引数を渡すことが後方互換性および前方互換性には有用です。

  • Gecko 28.0 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3) では、コンソールでこの引数を省略しないよう開発者に警告しています。
  • Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)) 以降、深いクローンではなく浅いクローンが既定値になっています。

返値

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

注: importedNode's Node.parentNodenull になります。まだ文書ツリーに挿入されていないからです。

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

外部の文書から取り込まれるノードは、現在の文書に挿入する前に、次のいずれかを実行してください。

ベストプラクティス: Firefox は現在はこの規則を強制しませんが、将来の互換性を向上するためにこの規則に従うことを強くお勧めします。

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

仕様書

仕様書 状態 備考
DOM
document.importNode() の定義
現行の標準
Document Object Model (DOM) Level 2 Core Specification
document.importNode() の定義
廃止 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報