blob: 9bf207226ae532997e2ee35deb52eed94f3590b1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
---
title: Document.importNode()
slug: Web/API/Document/importNode
tags:
- API
- DOM
- Document
- メソッド
- ノード
- リファレンス
- コピー
- importNode
browser-compat: api.Document.importNode
translation_of: Web/API/Document/importNode
---
{{APIRef("DOM")}}
{{domxref("Document")}} オブジェクトの **`importNode()`** メソッドは、後で現在の文書に挿入するために、他の文書から {{domxref("Node")}} または {{domxref("DocumentFragment")}} の複製を作成します。
インポートされたノードは、まだ文書ツリーには含まれません。これを含めるには、 {{domxref("Node.appendChild", "appendChild()")}} や {{domxref("Node.insertBefore", "insertBefore()")}} のような挿入メソッドを、現在の文書ツリーに*存在する*ノードに対して呼び出す必要があります。
{{domxref("document.adoptNode()")}} とは異なり、元の文書から元のノードは削除されません。インポートされたノードは元のノードの複製です。
## 構文
```js
importNode(externalNode)
importNode(externalNode, deep)
```
### 引数
- `externalNode`
- : 現在の文書にインポートする、外部の {{domxref("Node")}} または {{domxref("DocumentFragment")}} です。
- `deep` {{optional_inline}}
- : 論理値のフラグで、既定値は `false` であり、`externalNode` の DOM サブツリー全体をインポートするかどうかを制御します。
- `deep` が `true` に設定された場合、 `externalNode` およびその子孫全てが複製されます。
- `deep` が `false` に設定された場合、 `externalNode` のみがインポートされます — 新しいノードには子ノードはない状態になります。
### 返値
インポートする側の文書のスコープにコピーされた `importedNode` です。
> **Note:** `importedNode` の {{domxref("Node.parentNode")}} は `null` になります。まだ文書ツリーに挿入されていないからです。
## 例
```js
const iframe = document.querySelector("iframe");
const oldNode = iframe.contentWindow.document.getElementById("myNode");
const newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
```
## メモ
外部文書からのノードは、現在の文書に挿入する前に、次のいずれかの状態にしなければなりません。
- {{domXref("document.importNode()")}} でクローンする、または
- {{domXref("document.adoptNode()")}} で移行する
> **Note:** Firefox は今のところこのルールを強制していませんが、将来の互換性を改善するために、このルールに従うことを強く推奨します。
{{domXref("Node.ownerDocument")}} の問題に関して詳しくは、W3C DOM FAQ を参照してください。
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{domxref("document.adoptNode()")}} このメソッドととても似た動作を行う
- {{domxref("Node.appendChild()")}}
- {{domxref("Node.insertBefore()")}}
|
