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
|
---
title: Document.importNode()
slug: Web/API/Document/importNode
translation_of: Web/API/Document/importNode
---
<p id="Summary">{{APIRef("DOM")}}</p>
<h2 id="Summary" name="Summary">설명</h2>
<p>현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다.</p>
<h2 id="Syntax" name="Syntax">문법</h2>
<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>);
</pre>
<dl>
<dt><code>node</code></dt>
<dd>문서에 추가될 새로운 노드입니다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 <a href="/en-US/docs/DOM/Node.parentNode" style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;" title="DOM/Node.parentNode">parentNode</a><span style="line-height: 1.5;">는 null입니다.</span></dd>
<dt><code>externalNode</code></dt>
<dd>다른 문서에서 가져올 노드입니다.</dd>
<dt><code>deep</code></dt>
<dd>불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정합니다.</dd>
</dl>
<div class="note">
<p><strong>Note:</strong> DOM4 스펙 (Gecko 13.0 {{geckoRelease(13)}}에서 적용되어 있습니다)에서, <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">deep</span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">은 선택적 인자입니다. 만약 해당 속성을 생략한다면, 함수는 자동으로 </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">deep을 </span><strong style="line-height: 1.5em;"><code style="font-size: 14px;">true</code></strong><code style="font-size: 14px;">로 인식하여 작동하게 되고, 기본 동작을 하게 됩니다. 만약 자식 노드를 포함하지 않은 해당 노드만 가져오고싶다면, 반드시 <em>deep</em>인자에 false를 주시길 바랍니다.</code></p>
<p><code style="font-size: 14px;">이러한 동작 방식은 최신 스펙에서 변경되었고, 만약 deep 속성을 생략하면, 함수는 자동으로 deep을 false로 인식하여 동작합니다. 비록 deep 속성이 선택적 속성이라고 해도, 당신은 항상 deep 속성을 상호 호환성을 위하여 제공하는 것이 좋습니다. <em>Gecko 28.0 {{geckoRelease(28)}} </em>버전부터, deep속성을 입력하지 않을 경우 콘솔에서 에러를 반환합니다.</code></p>
</div>
<h2 id="Example" name="Example">예제</h2>
<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>오리지널 노드는 오리지널 문서에서 삭제되지 않습니다. 추가된 노드는 오리지널 노드의 복사본입니다.</p>
<p>Nodes from external documents should be cloned using <a href="/ko/docs/Web/API/Document/importNode" title="현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다."><code>document.importNode()</code></a> (or adopted using <a href="/ko/docs/Web/API/Document/adoptNode" title="외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 ownerDocument 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a href="/ko/docs/Web/API/Node/ownerDocument" title="Node.ownerDocument 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다."><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p>
<h2 id="브라우저_지원율">브라우저 지원율</h2>
<div>
<p>{{Compat("api.Document.importNode")}}</p>
</div>
<h2 id="Specifications" name="Specifications">관련문서</h2>
<ul>
<li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Core-Document-importNode">DOM Level 2 Core: Document.importNode</a></li>
<li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-importnode">DOM4 (draft): Document.importNode</a></li>
</ul>
<h2 id="참고">참고</h2>
<ul>
<li>{{domxref("document.adoptNode()")}}</li>
</ul>
|
