Document.importNode()

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

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

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

構文

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

引数

externalNode
現在の文書にインポートする、外部の Node または DocumentFragment です。
deep Optional
論理値で、 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() の定義
廃止された 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
importNodeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
deep parameter optionalChrome 完全対応 ありEdge 完全対応 ≤18Firefox 完全対応 10IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 10Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応

関連情報