diff options
Diffstat (limited to 'files/ko/web/api/node')
| -rw-r--r-- | files/ko/web/api/node/appendchild/index.html | 125 | ||||
| -rw-r--r-- | files/ko/web/api/node/childnodes/index.html | 51 | ||||
| -rw-r--r-- | files/ko/web/api/node/clonenode/index.html | 160 | ||||
| -rw-r--r-- | files/ko/web/api/node/contains/index.html | 105 | ||||
| -rw-r--r-- | files/ko/web/api/node/firstchild/index.html | 67 | ||||
| -rw-r--r-- | files/ko/web/api/node/haschildnodes/index.html | 42 | ||||
| -rw-r--r-- | files/ko/web/api/node/index.html | 263 | ||||
| -rw-r--r-- | files/ko/web/api/node/innertext/index.html | 88 | ||||
| -rw-r--r-- | files/ko/web/api/node/insertbefore/index.html | 167 | ||||
| -rw-r--r-- | files/ko/web/api/node/lastchild/index.html | 25 | ||||
| -rw-r--r-- | files/ko/web/api/node/nextsibling/index.html | 83 | ||||
| -rw-r--r-- | files/ko/web/api/node/normalize/index.html | 56 | ||||
| -rw-r--r-- | files/ko/web/api/node/ownerdocument/index.html | 63 | ||||
| -rw-r--r-- | files/ko/web/api/node/previoussibling/index.html | 42 | ||||
| -rw-r--r-- | files/ko/web/api/node/replacechild/index.html | 71 | ||||
| -rw-r--r-- | files/ko/web/api/node/textcontent/index.html | 111 |
16 files changed, 1519 insertions, 0 deletions
diff --git a/files/ko/web/api/node/appendchild/index.html b/files/ko/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..991c1f6136 --- /dev/null +++ b/files/ko/web/api/node/appendchild/index.html @@ -0,0 +1,125 @@ +--- +title: Node.appendChild() +slug: Web/API/Node/appendChild +tags: + - 노드 붙이기 + - 노드 이동 + - 돔 +translation_of: Web/API/Node/appendChild +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Node.appendChild()</strong></code> 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 <code>appendChild()</code> 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)</p> + +<p>이것은 한 노드가 문서상의 두 지점에 동시에 존재할 수 없다는 것을 의미합니다. 그래서 만약 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동합니다. </p> + +<p>{{domxref("Node.cloneNode()")}} 메소드는 노드가 새로운 부모의 밑으로 붙기 전에 노드를 복제합니다. <code>cloneNode 메소드로 만들어진 복사된 노드들은 자동적으로 문서에 적용되지 않는다는 것에 주의하세요</code>.</p> + +<p>이 메소드는 서로 다른 문서로 노드를 이동시키진 못합니다. 만약 노드를 다른 문서로 이동시키고 싶다면 {{domxref("document.importNode()")}} 메소드를 사용하셔야 합니다.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre> + +<p>이동한 자식 노드를 반환합니다.</p> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">// 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입니다. +var p = document.createElement("p"); +document.body.appendChild(p);</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change from {{SpecName("DOM3 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName("DOM2 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change from {{SpecName("DOM1")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> +</ul> diff --git a/files/ko/web/api/node/childnodes/index.html b/files/ko/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..b57a8eabc3 --- /dev/null +++ b/files/ko/web/api/node/childnodes/index.html @@ -0,0 +1,51 @@ +--- +title: element.childNodes +slug: Web/API/Node/childNodes +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/childNodes +--- +<p>{{ ApiRef() }}</p> +<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3> +<p><b>childNodes</b>는 주어진 요소의 자식 노드 모음( + <i> + collection</i> + )을 반환합니다.</p> +<h3 id=".EA.B5.AC.EB.AC.B8.EA.B3.BC_.EA.B0.92" name=".EA.B5.AC.EB.AC.B8.EA.B3.BC_.EA.B0.92">구문과 값</h3> +<pre class="eval">var <var>ndList</var> = elementNodeReference.childNodes; +</pre> +<p><var>ndList</var>는 현재 요소의 자식인 노드 개체의 순서 있는 모음입니다. 요소가 자식이 없으면, <var>ndList</var>는 아무 노드도 포함하지 않습니다.</p> +<p><var>ndList</var>는 childNodes의 노드 목록을 저장하는 변수입니다. 그 목록은 <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">NodeList</a> 형입니다. childNodes 속성은 읽기 전용입니다.</p> +<h3 id=".EC.98.88" name=".EC.98.88">예</h3> +<pre>// parg는 <p> 요소 개체 참조 +if (parg.hasChildNodes()) +// 그래서, 먼저 개체가 찼는 지(자식 노드가 있는 지) 검사 + { + var children = parg.childNodes; + for (var i = 0; i < children.length; i++) + { + // children[i]로 각 자식에 무언가를 함 + // 주의: 목록은 유효해(live), 자식 추가나 제거는 목록을 바꿈 + }; + }; +</pre> +<pre>// This는 노드에서 모든 자식을 제거하는 한 방법 +// box는 자식 있는 요소 개체 참조 +while (box.firstChild) + { + //목록은 유효해서(LIVE) 호출마다 재배열(re-index)함 + box.removeChild(box.firstChild); + }; +</pre> +<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3> +<p>노드 모음의 항목은 문자열이 아니라 개체입니다. 그 노드 개체에서 데이터를 얻으려면, 속성(예컨대 이름을 얻으려면 <code>elementNodeReference.childNodes{{ mediawiki.external(1) }}.nodeName</code> 등)을 써야 합니다.</p> +<p><code>document</code> 개체는 자식이 둘입니다. Doctype 선언과 <code>HTML</code> 요소.</p> +<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.childNodes", "fr": "fr/DOM/element.childNodes", "pl": "pl/DOM/element.childNodes" } ) }}</p> diff --git a/files/ko/web/api/node/clonenode/index.html b/files/ko/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..36e4c8e0d5 --- /dev/null +++ b/files/ko/web/api/node/clonenode/index.html @@ -0,0 +1,160 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +translation_of: Web/API/Node/cloneNode +--- +<div>{{APIRef("DOM")}}</div> + +<div><strong><code>Node.cloneNode()</code></strong> 메서드는 이 메서드를 호출한 Node 의 복제된 Node를 반환합니다.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode(<em><var>deep</var></em>); +</pre> + +<dl> + <dt><em>node</em></dt> + <dd>복제되어야 할 node.</dd> + <dt><em>dupNode</em></dt> + <dd><em>복제된 새로운 node.</em></dd> + <dt><em>deep {{optional_inline}}</em></dt> + <dd><em>해당 node의 children 까지 복제하려면 true, 해당 node 만 복제하려면 false</em></dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> In the DOM4 specification (as implemented in Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> is an optional argument. If omitted, the method acts as if the value of <code>deep</code> was <strong><code>true</code></strong>, defaulting to using deep cloning as the default behavior. To create a shallow clone, <code>deep</code> must be set to <code>false</code>.</p> + +<p>This behavior has been changed in the latest spec, and if omitted, the method will act as if the value of <code>deep</code> was <strong><code>false</code></strong>. Though It's still optional, you should always provide the <code>deep</code> argument both for backward and forward compatibility. With Gecko 28.0 {{geckoRelease(28)}}), the console warned developers not to omit the argument. Starting with Gecko 29.0 {{geckoRelease(29)}}), a shallow clone is defaulted instead of a deep clone.</p> +</div> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var p = document.getElementById("para1"); +var p_prime = p.cloneNode(true); +</pre> + +<h2 id="Notes">Notes</h2> + +<p id="not-event-listeners">Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> or those assigned to element properties. (e.g. <code>node.onclick = fn</code>) Moreover, for a <canvas> element, the painted image is not copied.</p> + +<p>The duplicate node returned by <code>cloneNode()</code> is not part of the document until it is added to another node that is part of the document using {{domxref("Node.appendChild()")}} or a similar method. It also has no parent until it is appended to another node.</p> + +<p>If <code>deep</code> is set to <code>false</code>, child nodes are not cloned. Any text that the node contains is not cloned either, as it is contained in one or more child {{domxref("Text")}} nodes.</p> + +<p>If <code>deep</code> evaluates to <code>true</code>, the whole subtree (including text that may be in child {{domxref("Text")}} nodes) is copied too. For empty nodes (e.g. {{HTMLElement("img")}} and {{HTMLElement("input")}} elements) it doesn't matter whether <code>deep</code> is set to <code>true</code> or <code>false</code>.</p> + +<div class="warning"><strong>Warning:</strong> <code>cloneNode()</code> may lead to duplicate element IDs in a document.</div> + +<p>If the original node has an ID and the clone is to be placed in the same document, the ID of the clone should be modified to be unique. Name attributes may need to be modified also, depending on whether duplicate names are expected.</p> + +<p>To clone a node for appending to a different document, use {{domxref("Document.importNode()")}} instead.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>deep</code> as an optional parameter</td> + <td> + <p>{{CompatVersionUnknown}}<sup>[1]</sup></p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}<sup>[1]</sup></p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>deep</code> as an optional parameter</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Default value for the <code>deep</code> parameter is <code>false</code>.</p> diff --git a/files/ko/web/api/node/contains/index.html b/files/ko/web/api/node/contains/index.html new file mode 100644 index 0000000000..982c26ae4c --- /dev/null +++ b/files/ko/web/api/node/contains/index.html @@ -0,0 +1,105 @@ +--- +title: Node.contains() +slug: Web/API/Node/contains +translation_of: Web/API/Node/contains +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Node.contains()</code></strong> 메소드는 주어진 인자가 node 의 자손인지, 아닌지에 대한 {{jsxref("Boolean")}} 값을 리턴합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">node.contains( otherNode ) +</pre> + +<h2 id="Example">Example</h2> + +<p>이 함수는 요소가 페이지의 body 안에 있는지 검사합니다. <code>contains</code> 는 포괄적이므로 node 가 body 자기 자신일 경우에도 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">true</span></font> 가 반환됩니다. 만약 이걸 원하지 않는 경우에는 node 가 body 자기 자신인지 검사하여 <code>false</code> 를 반환하여 버리면 됩니다.</p> + +<pre class="brush:js">function isInPage(node) { + return (node === document.body) ? false : document.body.contains(node); +}</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>5.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer <a href="https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect">only supports <code>contains()</code> for elements</a>.</p> + +<p>[2] Safari 2.x <a href="https://books.google.de/books?id=KW9G9rdlStIC&lpg=PA299&ots=4XRWUISZVr&dq=safari+node+contains+professional+javascript&pg=PA299&hl=de#v=onepage&q=safari%20node%20contains%20professional%20javascript&f=false">implemented <code>contains()</code> incorrectly</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Node.compareDocumentPosition")}}</li> + <li>{{domxref("Node.hasChildNodes")}}</li> +</ul> diff --git a/files/ko/web/api/node/firstchild/index.html b/files/ko/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..105c335e1c --- /dev/null +++ b/files/ko/web/api/node/firstchild/index.html @@ -0,0 +1,67 @@ +--- +title: element.firstChild +slug: Web/API/Node/firstChild +tags: + - DOM + - Gecko +translation_of: Web/API/Node/firstChild +--- +<p>{{ ApiRef() }}</p> + +<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3> + +<p>트리에서 노드의 첫 번째 자식이나 <code>null</code>(노드가 자식이 없으면)을 반환합니다.</p> + +<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3> + +<pre class="eval"><em>childNode</em> =<em>node</em>.firstChild; +</pre> + +<p><code>childNode</code>는 자식이 있으면 <code>node</code>의 첫 번째 자식 참조이고 없으면 <code>null</code>입니다.</p> + +<h3 id=".EC.98.88" name=".EC.98.88">예</h3> + +<p>이 예는 <code>firstChild</code>의 쓰임과 공백 노드가 어떻게 이 프로퍼티 사용을 방해하는 지 실제로 보입니다. Gecko DOM에서 공백 처리에 관한 더 많은 정보는 {{ Anch("Notes") }} 절을 보세요.</p> + +<pre><p id="para-01"> + <span>First span</span> +</p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>위에서, alert은 텍스트 노드가 여는 태그 <p>의 끝과 여는 태그 <span> 사이에 공백을 유지하여 삽입되었기 때문에 '#text'를 보입니다. space 하나에서 여럿, return, tab 등 <strong>어떤</strong> 공백이든 #text 노드에 삽입되게 됩니다.</p> + +<p>다른 #text 노드는 닫는 태그 </span>과 닫는 태그 </p> 사이에 삽입됩니다.</p> + +<p>이 공백을 소스에서 제거하면, #text 노드는 삽입되지 않고 span 요소가 paragraph의 첫 번째 자식이 됩니다.</p> + +<pre><p id="para-01"><span>First span</span></p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>이제 alert은 'SPAN'을 보입니다.</p> + +<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3> + +<p></p><p>Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다. + 그러므로 예를 들어 <a href="/ko/docs/Web/API/Node/firstChild" title="트리에서 노드의 첫 번째 자식이나 null(노드가 자식이 없으면)을 반환합니다."><code>Node.firstChild</code></a>나 <a href="/ko/docs/Web/API/Node/previousSibling" title="Node.previousSibling은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 특정 자식 노드를 리턴하거나 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴합니다."><code>Node.previousSibling</code></a>을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는 + 달리 공백 텍스트 노드를 참조할 지도 모릅니다. </p> + + <p>더 많은 정보는 <a class="new" href="/ko/docs/Whitespace_in_the_DOM" rel="nofollow">Whitespace in the DOM</a>과 + <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>를 보세요.</p><p></p> + +<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3> + +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p> + +<p>{{ languages( { "en": "en/DOM/element.firstChild", "fr": "fr/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild" } ) }}</p> diff --git a/files/ko/web/api/node/haschildnodes/index.html b/files/ko/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..eff203c8a8 --- /dev/null +++ b/files/ko/web/api/node/haschildnodes/index.html @@ -0,0 +1,42 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +tags: + - API + - DOM + - Method + - Node +translation_of: Web/API/Node/hasChildNodes +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p><code><strong>Node.hasChildNodes()</strong></code> 메소드는 현재 노드({{domxref("Node")}})에게 자식노드(<a href="/en-US/docs/Web/API/Node.childNodes" title="DOM/Node.childNodes">child nodes</a>)가 있는지를 {{jsxref("Boolean")}} 값으로 반환합니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox"><code>node.hasChildNodes()</code></pre> + +<h2 id="Example" name="Example">예시</h2> + +<p>아래 예시에서는 "foo"라는 id를 가진 요소를 찾고 "foo" 요소에게 자식노드가 있으면 첫번째 자식노드를 제거해줍니다.</p> + +<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo"); + +if ( foo.hasChildNodes() ) { + foo.removeChild( foo.childNodes[0] ); +}</pre> + +<h2 id="Specification" name="Specification">명세</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li> +</ul> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{domxref("Node.childNodes")}}</li> + <li>{{domxref("Node.hasAttributes")}}</li> +</ul> diff --git a/files/ko/web/api/node/index.html b/files/ko/web/api/node/index.html new file mode 100644 index 0000000000..ed301eff02 --- /dev/null +++ b/files/ko/web/api/node/index.html @@ -0,0 +1,263 @@ +--- +title: Node +slug: Web/API/Node +tags: + - DOM + - Node +translation_of: Web/API/Node +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Node</code></strong>는 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. 예를들어, 똑같은 메소드를 상속하거나 똑같은 방식으로 테스트를 할수있다</p> + +<p>다음의 인터페이스들은 모두 <code>Node</code>로부터 메소드와 프라퍼티를 상속한다: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} ({{domxref("Text")}}, {{domxref("Comment")}}, {{domxref("CDATASection")}}이 상속), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> + +<p>이 인터페이스들은 메소드나 프라퍼티가 적합하지 않은 경우에 null을 반환할 수 있다. 그들은 예외를 발생할 수 있다 - 예를 들어 자식이 있을 수 없는 노드 타입에 자식을 추가할 때 말이다.</p> + +<h2 id="프라퍼티_<속성>">프라퍼티 <속성></h2> + +<p><em>부모인 {{domxref("EventTarget")}}으로부터 프라퍼티를 상속한다</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd> + <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt> + <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> + <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> + <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd> + <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br> + Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd> + <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt> + <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd> + <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> + <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: + <table class="standard-table"> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> + <td><code>12</code></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{domxref("Node.nodeValue")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> type, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd> + <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> + <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> + <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd> + <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br> + Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> + <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{domxref("Node.textContent")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd> +</dl> + +<h2 id="메소드">메소드</h2> + +<p><em>부모인 {{domxref("EventTarget")}}으로부터 메소드를 상속한다</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.appendChild()")}}</dt> + <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd> + <dt>{{domxref("Node.cloneNode()")}}</dt> + <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> + <dt>{{domxref("Node.compareDocumentPosition()")}}</dt> + <dd></dd> + <dt>{{domxref("Node.contains()")}}</dt> + <dd></dd> + <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd> + <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd> + <dt>{{domxref("Node.hasChildNodes()")}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd> + <dt>{{domxref("Node.insertBefore()")}}</dt> + <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd> + <dt>{{domxref("Node.isDefaultNamespace()")}}</dt> + <dd></dd> + <dt>{{domxref("Node.isEqualNode()")}}</dt> + <dd></dd> + <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt> + <dd></dd> + <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> + <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd> + <dt>{{domxref("Node.lookupPrefix()")}}</dt> + <dd></dd> + <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt> + <dd></dd> + <dt>{{domxref("Node.normalize()")}}</dt> + <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> + <dt>{{domxref("Node.removeChild()")}}</dt> + <dd>Removes a child node from the current element, which must be a child of the current node.</dd> + <dt>{{domxref("Node.replaceChild()")}}</dt> + <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd> + <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> + <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="모든_자식_노드_탐색">모든 자식 노드 탐색</h3> + +<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p> + +<pre class="brush: js">function DOMComb (oParent, oCallback) { + if (oParent.hasChildNodes()) { + for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { + DOMComb(oNode, oCallback); + } + } + oCallback.call(oParent); +}</pre> + +<h4 id="Syntax">Syntax</h4> + +<pre>DOMComb(parentNode, callbackFunction);</pre> + +<h4 id="Description">Description</h4> + +<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt><code>parentNode</code></dt> + <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd> + <dt><code>callbackFunction</code></dt> + <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> +</dl> + +<h4 id="Sample_usage">Sample usage</h4> + +<p>The following example send to the <code>console.log</code> the text content of the body:</p> + +<pre class="brush: js">function printContent () { + if (this.nodeValue) { console.log(this.nodeValue); } +} + +onload = function () { + DOMComb(document.body, printContent); +};</pre> + +<h3 id="한_노드_안에_중첩된_모든_자식_제거">한 노드 안에 중첩된 모든 자식 제거</h3> + +<pre class="brush: js">Element.prototype.removeAll = function () { + while (this.firstChild) { this.removeChild(this.firstChild); } + return this; +};</pre> + +<h4 id="Sample_usage_2">Sample usage</h4> + +<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ +document.body.removeAll();</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br> + The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br> + Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> + Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br> + Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("api.Node")}}</p> diff --git a/files/ko/web/api/node/innertext/index.html b/files/ko/web/api/node/innertext/index.html new file mode 100644 index 0000000000..414fab5c00 --- /dev/null +++ b/files/ko/web/api/node/innertext/index.html @@ -0,0 +1,88 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +tags: + - API + - DOM + - HTMLElement + - Property + - Reference +translation_of: Web/API/HTMLElement/innerText +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">{{domxref("HTMLElement")}} 인터페이스의 <code><strong>innerText</strong></code> 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다.</span> <code>innerText</code>는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>innerText</code>는 {{domxref("Node.textContent")}}와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, <code>innerText</code>는 텍스트의 렌더링 후 모습을 인식할 수 있지만 <code>textContent</code>는 그렇지 않습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre>const renderedText = <em>htmlElement</em>.innerText +<em>htmlElement</em>.innerText = <em>string</em> +</pre> + +<h3 id="값">값</h3> + +<p>요소의 렌더링 된 텍스트 콘텐츠를 나타내는 {{domxref("DOMString")}}. 요소 자체가 <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered">렌더링 중</a>이 아니라면 {{domxref("Node.textContent")}} 속성의 값과 동일합니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 <code>innerText</code>와 {{domxref("Node.textContent")}}를 비교합니다. <code>innerText</code>가 {{htmlElement("br")}} 태그를 인식하고, 숨겨진 요소를 무시하는 점에 주목하세요.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><h3>원본 요소:</h3> +<p id="source"> + <style>#source { color: red; }</style> +아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요. + <span style="display:none">숨겨진 글</span> +</p> +<h3>textContent 결과:</h3> +<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea> +<h3>innerText 결과:</h3> +<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const source = document.getElementById('source'); +const textContentOutput = document.getElementById('textContentOutput'); +const innerTextOutput = document.getElementById('innerTextOutput'); + +textContentOutput.innerHTML = source.textContent; +innerTextOutput.innerHTML = source.innerText;</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", 700, 450)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Introduced, based on the <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. See <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> and <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> for history.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("api.HTMLElement.innerText")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> diff --git a/files/ko/web/api/node/insertbefore/index.html b/files/ko/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..a3a0782745 --- /dev/null +++ b/files/ko/web/api/node/insertbefore/index.html @@ -0,0 +1,167 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +translation_of: Web/API/Node/insertBefore +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p><code><strong>Node.insertBefore()</strong></code> 메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. 만약 주어진 자식 노드가 document에 존재하는 노드를 참조한다면, <code>insertBefore()</code> 가 자식 노드를 현재 위치에서 새로운 위치로 옮깁니다. (노드를 다른 노드에 추가하기 전에 상위 노드에서 제거할 필요가 없습니다)</p> + +<p>이것은 노드가 document에 동시에 두 곳에 존재할 수 없다는 것을 의미합니다. 그러므로 노드가 이미 부모를 가지고 있다면, 노드가 제거된 뒤에 새로운 위치에 삽입됩니다. {{domxref("Node.cloneNode()")}} 로 노드를 새로운 부모 아래에 추가하기 전에 복사본을 만들수 있습니다. <code>cloneNode</code> 로 만들어진 복사본들은 자동으로 동기화 상태를 유지하지 않는다는 것을 알아두십시오.</p> + +<p>만약 참조 노드가 <code>null</code> 이라면, 노드는 부모 노드의 자식 노드 리스트 맨 끝에 추가됩니다.</p> + +<p>만약 자식 노드가 {{domxref("DocumentFragment")}} 이라면, {{domxref("DocumentFragment")}} 의 콘텐츠 전체는 부모 노드의 자식 리스트로 이동됩니다.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>); +</pre> + +<p><code><var>referenceNode</var></code> 가 <code>null</code> 이라면, <code><var>newNode</var></code> 가 자식 노드의 리스트의 끝에 삽입됩니다.</p> + +<div class="note"> +<p><em><code>referenceNode</code></em> 는 <strong>선택 인자가 아닙니다.</strong> -- 명시적으로 <code>Node</code> 나 <code>null</code> 를 전달해야 합니다. 전달하지 않거나 잘못된 값을 전달하면 브라우저 버전에 따라 다른 결과를 얻게 됩니다.</p> +</div> + +<h2 id="Returns" name="Returns">Returns</h2> + +<p>반환값은 추가된 자식 노드입니다. 다만 <code>newNode</code> 가 {{domxref("DocumentFragment")}} 일 경우, 빈 {{domxref("DocumentFragment")}} 이 반환됩니다.</p> + +<h2 id="Example_1" name="Example_1">Example 1</h2> + +<pre class="brush: html"><div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// Create the new node to insert +var newNode = document.createElement("span"); + +// Get a reference to the parent node +var parentDiv = document.getElementById("childElement").parentNode; + +// Begin test case [ 1 ] : Exist a childElement --> All working correctly +var sp2 = document.getElementById("childElement"); +parentDiv.insertBefore(newNode, sp2); +// End test case [ 1 ] + +// Begin test case [ 2 ] : childElement is of Type undefined +var sp2 = undefined; // Not exist a node of id "childElement" +parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node +// End test case [ 2 ] + +// Begin test case [ 3 ] : childElement is of Type "undefined" ( string ) +var sp2 = "undefined"; // Not exist a node of id "childElement" +parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument" +// End test case [ 3 ] +</script></pre> + +<ul> + <li><code>insertedNode</code> The node being inserted, that is <code>newNode</code></li> + <li><code>parentNode</code> The parent of the newly inserted node.</li> + <li><code>newNode</code> The node to be inserted.</li> + <li><code>referenceNode</code> The node before which <code>newNode</code> is inserted.</li> +</ul> + +<h2 id="Example_2" name="Example_2">Example 2</h2> + +<pre class="brush:html"><div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// Create a new, plain <span> element +var sp1 = document.createElement("span"); + +// Get a reference to the element, before we want to insert the element +var sp2 = document.getElementById("childElement"); +// Get a reference to the parent element +var parentDiv = sp2.parentNode; + +// Insert the new element into the DOM before sp2 +parentDiv.insertBefore(sp1, sp2); +</script> +</pre> + +<p>There is no <code>insertAfter</code> method. It can be emulated by combining the <code>insertBefore</code> method with <code><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p> + +<p>In the previous example, <code>sp1</code> could be inserted after <code>sp2</code> using:</p> + +<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre> + +<p>If <code>sp2</code> does not have a next sibling, then it must be the last child — <code>sp2.nextSibling</code> returns <code>null</code>, and <code>sp1</code> is inserted at the end of the child node list (immediately after <code>sp2</code>).</p> + +<h2 id="Example_3" name="Example_3">Example 3</h2> + +<p>Insert an element before the first child element, using the <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a> property.</p> + +<pre class="brush:js">// Get a reference to the element in which we want to insert a new node +var parentElement = document.getElementById('parentElement'); +// Get a reference to the first child +var theFirstChild = parentElement.firstChild; + +// Create a new element +var newElement = document.createElement("div"); + +// Insert the new element before the first child +parentElement.insertBefore(newElement, theFirstChild); +</pre> + +<p>When the element does not have a first child, then <code>firstChild</code> is <code>null</code>. The element is still appended to the parent, after the last child. Since the parent element did not have a first child, it did not have a last child either. Consequently, the new element is the only element, after insertion.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Node.insertBefore")}}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Fixes errors in the insertion algorithm</td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>Describes the algorithm in more detail</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No notable changes</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No notable changes</td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Introduced</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("ParentNode.prepend()")}}</li> +</ul> diff --git a/files/ko/web/api/node/lastchild/index.html b/files/ko/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..158ffdab32 --- /dev/null +++ b/files/ko/web/api/node/lastchild/index.html @@ -0,0 +1,25 @@ +--- +title: element.lastChild +slug: Web/API/Node/lastChild +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/lastChild +--- +<p>{{ ApiRef() }}</p> +<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3> +<p><b>lastChild</b>는 노드의 마지막 자식을 반환합니다.</p> +<h3 id=".EA.B5.AC.EB.AC.B8.EA.B3.BC_.EA.B0.92" name=".EA.B5.AC.EB.AC.B8.EA.B3.BC_.EA.B0.92">구문과 값</h3> +<pre class="eval"><i>last_child</i> = element.lastChild +</pre> +<p>반환되는 <code>last_child</code>는 노드입니다. 노드의 부모가 요소이면, 자식은 보통 요소 노드, 텍스트 노드, 주석 노드입니다.</p> +<h3 id=".EC.98.88" name=".EC.98.88">예</h3> +<pre>var tr = document.getElementById("row1"); +corner_td = tr.lastChild; +</pre> +<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3> +<p>자식 요소가 없으면 <code>null</code>을 반환합니다.</p> +<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB">lastChild </a></p> +<p>{{ languages( { "en": "en/DOM/element.lastChild", "fr": "fr/DOM/element.lastChild", "pl": "pl/DOM/element.lastChild" } ) }}</p> diff --git a/files/ko/web/api/node/nextsibling/index.html b/files/ko/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..8627bd096b --- /dev/null +++ b/files/ko/web/api/node/nextsibling/index.html @@ -0,0 +1,83 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +tags: + - API + - DOM + - Gecko + - Node + - Property +translation_of: Web/API/Node/nextSibling +--- +<div> +<div>{{APIRef("DOM")}}</div> + +<div> </div> +</div> + +<p><span id="result_box" lang="ko"><span>읽기 전용 속성인 <code><strong>Node.nextSibling</strong></code> 은 부모의</span></span> {{domxref("Node.childNodes","childNodes")}} <span lang="ko"><span>목록에서 지정된 노드 바로 다음에 있는 노드를 반환하거나 지정된 노드가 해당 목록의 마지막 노드이면 <code>null</code> 값을 반환합니다.</span></span></p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p></p><p>Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다. + 그러므로 예를 들어 <a href="/ko/docs/Web/API/Node/firstChild" title="트리에서 노드의 첫 번째 자식이나 null(노드가 자식이 없으면)을 반환합니다."><code>Node.firstChild</code></a>나 <a href="/ko/docs/Web/API/Node/previousSibling" title="Node.previousSibling은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 특정 자식 노드를 리턴하거나 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴합니다."><code>Node.previousSibling</code></a>을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는 + 달리 공백 텍스트 노드를 참조할 지도 모릅니다. </p> + + <p>더 많은 정보는 <a class="new" href="/ko/docs/Whitespace_in_the_DOM" rel="nofollow">Whitespace in the DOM</a>과 + <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>를 보세요.</p><p></p> + +<div> </div> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:html"><div id="div-01">Here is div-01</div> +<div id="div-02">Here is div-02</div> + +<script type="text/javascript"> +var el = document.getElementById('div-01').nextSibling, + i = 1; + +console.log('Siblings of div-01:'); + +while (el) { + console.log(i + '. ' + el.nodeName); + el = el.nextSibling; + i++; +} + +</script> + +/************************************************** + <span class="short_text" id="result_box" lang="ko"><span>로드될 때 다음과 같이 콘솔에 기록됩니다.</span></span> : + + Siblings of div-01 + + 1. #text + 2. DIV + 3. #text + 4. SCRIPT + +**************************************************/ +</pre> + +<p>위의 예에서 <code>#text</code> 노드는 태그 사이의 마크 업 에서 공백이 발생하는 DOM에 삽입되며 ( 즉 요소의 닫기 태그와 다음 태그의 열기 태그 사이에 있습니다 ) <code>document.write</code> 구문에 의해 삽입 된 요소간에 공백이 생성되지 않습니다.</p> + +<p><span id="result_box" lang="ko"><span><code>nextSibling</code> 을 사용하여 DOM을 탐색 할 때, DOM에 텍스트 노드를 포함시킬 수 있어야 합니다.</span> <span>노트 섹션의 리소스를 참조하세요.</span></span></p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element.nextElementSibling")}}</li> +</ul> diff --git a/files/ko/web/api/node/normalize/index.html b/files/ko/web/api/node/normalize/index.html new file mode 100644 index 0000000000..dca132296c --- /dev/null +++ b/files/ko/web/api/node/normalize/index.html @@ -0,0 +1,56 @@ +--- +title: Node.normalize() +slug: Web/API/Node/normalize +tags: + - API + - DOM + - NeedsSpecTable + - 노드 + - 레퍼런스 + - 메소드 +translation_of: Web/API/Node/normalize +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p><code><strong>Node.normalize()</strong></code> 메소드는 지정된 노드와 하위 트리의 모든 노드를 "정규화된" 형태로 놓습니다. 정규화된 하위 트리의 텍스트 노드는 비어있지 않으며 인접한 텍스트 노드도 존재하지 않습니다.</p> + +<h2 id="Syntax" name="Syntax">문법</h2> + +<pre class="syntaxbox"><em>element</em>.normalize(); +</pre> + +<h2 id="Example" name="Example">예제</h2> + +<pre class="brush:js">var wrapper = document.createElement("div"); + +wrapper.appendChild( document.createTextNode("Part 1 ") ); +wrapper.appendChild( document.createTextNode("Part 2 ") ); + +// 이 때, wrapper.childNodes.length === 2 +// wrapper.childNodes[0].textContent === "Part 1 " +// wrapper.childNodes[1].textContent === "Part 2 " + +wrapper.normalize(); + +// 이제, wrapper.childNodes.length === 1 +// wrapper.childNodes[0].textContent === "Part 1 Part 2 "</pre> + +<h2 id="Specification" name="Specification">명세</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li> +</ul> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Node.normalize")}}</p> + +<h2 id="See_also" name="See_also">함께 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Text/splitText" title="DOM/Text.splitText"><code>Text.splitText</code></a></li> +</ul> diff --git a/files/ko/web/api/node/ownerdocument/index.html b/files/ko/web/api/node/ownerdocument/index.html new file mode 100644 index 0000000000..b3aced6728 --- /dev/null +++ b/files/ko/web/api/node/ownerdocument/index.html @@ -0,0 +1,63 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +translation_of: Web/API/Node/ownerDocument +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Node.ownerDocument</strong></code> 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>document</var> = <var>element</var>.ownerDocument +</pre> + +<ul> + <li><code>document</code> 는 element 의 부모 <a href="/en-US/docs/DOM/document"><code>document</code></a> 객체입니다.</li> +</ul> + +<h2 id="Example">Example</h2> + +<pre class="brush:js">// given a node "p", get the top-level HTML child +// of the document object + +var d = p.ownerDocument; +var html = d.documentElement; +</pre> + +<h2 id="Notes">Notes</h2> + +<p>이 속성에 의해 반환된<code>document</code> 객체는 실제 HTML 문서의 모든 child 노드들이 생성되는 메인 객체입니다. 이 속성이 document 그 자체 노드에서 사용될 경우, 결과는 <code>null</code> 이 됩니다. </p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Node.ownerDocument")}}</p> diff --git a/files/ko/web/api/node/previoussibling/index.html b/files/ko/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..642b896748 --- /dev/null +++ b/files/ko/web/api/node/previoussibling/index.html @@ -0,0 +1,42 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +translation_of: Web/API/Node/previousSibling +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p><code><strong>Node.previousSibling</strong>은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 </code>{{domxref("Node.childNodes", "childNodes")}}<code> 목록에서 특정 자식 노드를 리턴하거나 </code>childNodes <code>목록의 첫번째 노드일 경우 Null값을 리턴합니다.</code></p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling; +</pre> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">// <a><b1 id="b1"/><b2 id="b2"/></a> + +alert(document.getElementById("b1").previousSibling); // null +alert(document.getElementById("b2").previousSibling.id); // "b1" +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p></p><p>Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다. + 그러므로 예를 들어 <a href="/ko/docs/Web/API/Node/firstChild" title="트리에서 노드의 첫 번째 자식이나 null(노드가 자식이 없으면)을 반환합니다."><code>Node.firstChild</code></a>나 <a href="/ko/docs/Web/API/Node/previousSibling" title="Node.previousSibling은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 특정 자식 노드를 리턴하거나 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴합니다."><code>Node.previousSibling</code></a>을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는 + 달리 공백 텍스트 노드를 참조할 지도 모릅니다. </p> + + <p>더 많은 정보는 <a class="new" href="/ko/docs/Whitespace_in_the_DOM" rel="nofollow">Whitespace in the DOM</a>과 + <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>를 보세요.</p><p></p> + +<p>To navigate the opposite way through the child nodes list use <a href="/en-US/docs/Web/API/Node.nextSibling" title="DOM/Node.nextSibling">Node.nextSibling</a>.</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li> +</ul> diff --git a/files/ko/web/api/node/replacechild/index.html b/files/ko/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..b058cc4c99 --- /dev/null +++ b/files/ko/web/api/node/replacechild/index.html @@ -0,0 +1,71 @@ +--- +title: Node.replaceChild() +slug: Web/API/Node/replaceChild +tags: + - 노드 교체 + - 돔 조작 + - 자바스크립트 +translation_of: Web/API/Node/replaceChild +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p><strong><code>Node.replaceChild()</code></strong> 메소드는 특정 부모 노드의 한 자식 노드를 다른 노드로 교체합니다.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>); +</pre> + +<ul> + <li><code>newChild는 oldChild를 교체할 새로운 노드입니다. 만약 이미 </code>DOM<code> 안에 존재한다면 가장 먼저 제거됩니다.</code></li> + <li><code>oldChild는 이미 존재하는, 교체될 자식 노드입니다.</code></li> + <li><code>replacedNode는 교체된 노드입니다. oldChild와 동일한 노드입니다.</code></li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">// <div> +// <span id="childSpan">foo bar</span> +// </div> + +// 텅빈 요소 노드를 하나 생성합니다. +// ID도, 속성도, 컨텐츠도 없습니다. +var sp1 = document.createElement("span"); + +// 'newSpan'이란 id 속성을 부여합니다. +sp1.id = "newSpan"; + +// 새로운 요소를 위한 컨텐츠를 생성합니다. +var sp1_content = document.createTextNode("new replacement span element."); + +// 컨텐츠를 생성한 요소에 붙입니다. +sp1.appendChild(sp1_content); + +// DOM에 존재하던, 교체되야할 노드를 참조합니다. +var sp2 = document.getElementById("childSpan"); +var parentDiv = sp2.parentNode; + +// 이미 존재하던 sp2 노드를 새로운 span 요소인 sp1으로 교체합니다. +parentDiv.replaceChild(sp1, sp2); + +// 결과: +// <div> +// <span id="newSpan">new replacement span element.</span> +// </div> +</pre> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li> +</ul> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> +</ul> diff --git a/files/ko/web/api/node/textcontent/index.html b/files/ko/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..f9b1798a96 --- /dev/null +++ b/files/ko/web/api/node/textcontent/index.html @@ -0,0 +1,111 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Node + - Property + - Reference +translation_of: Web/API/Node/textContent +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Node")}} 인터페이스의 <code><strong>textContent</strong></code> 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>textContent</code>와 {{domxref("HTMLElement.innerText")}}가 자주 혼동되곤 하지만, 두 속성에는 {{anch("innerText와의 차이점", "몇 가지 중요한 차이점")}}이 있습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">let <var>text</var> = <var>someNode</var>.textContent +<var>someOtherNode</var>.textContent = <var>string</var></pre> + +<h3 id="값">값</h3> + +<p>문자열 또는 {{jsxref("null")}}.</p> + +<h2 id="설명">설명</h2> + +<p><code>textContent</code>의 값은 상황에 따라 다릅니다.</p> + +<ul> + <li>노드가 {{domxref("document")}} 또는 {{glossary("Doctype")}}이면 {{jsxref("null")}}을 반환합니다. + <div class="note"><strong>참고:</strong> 전체 문서의 모든 텍스트와 CDATA 데이터를 얻으려면 <code><a href="/ko/docs/Web/API/Document/documentElement">document.documentElement</a>.textContent</code>를 사용하세요.</div> + </li> + <li>노드가 <a href="/ko/docs/Web/API/CDATASection">CDATA 구획</a>, 주석, <a href="/ko/docs/Web/API/ProcessingInstruction">처리 명령</a>, <a href="/ko/docs/Web/API/Text">텍스트 노드</a>면 노드 내의 텍스트, 즉 {{domxref("Node.nodeValue")}}를 반환합니다.</li> + <li>다른 노드 유형에 대해서는 주석과 처리 명령을 제외한 모든 자식 노드의 <code>textContent</code>를 병합한 결과를 반환합니다. 자식이 없는 경우 빈 문자열입니다.</li> +</ul> + +<p>노드의 <code>textContent</code>를 설정하면, 노드의 모든 자식을 주어진 문자열로 이루어진 하나의 텍스트 노드로 대치합니다.</p> + +<h3 id="innerText와의_차이점"><code>innerText</code>와의 차이점</h3> + +<p>비록 <code>Node.textContent</code>와 {{domxref("HTMLElement.innerText")}}의 이름이 유사하긴 하지만, 중요한 차이가 있으므로 헷갈리지 마세요.</p> + +<ul> + <li><code>textContent</code>는 {{htmlelement("script")}}와 {{htmlelement("style")}} 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. 반면 <code>innerText</code>는 "사람이 읽을 수 있는" 요소만 처리합니다.</li> + <li><code>textContent</code>는 노드의 모든 요소를 반환합니다. 그에 비해 <code>innerText</code>는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않습니다. + <ul> + <li>또한, <code>innerText</code>의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 {{glossary("reflow", "리플로우")}}가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다)</li> + </ul> + </li> + <li>Internet Explorer 기준, <code>innerText</code>를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴합니다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능합니다.</li> +</ul> + +<h3 id="innerHTML과의_차이점"><code>innerHTML</code>과의 차이점</h3> + +<p>{{domxref("Element.innerHTML")}}는 이름 그대로 HTML을 반환합니다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 <code>textContent</code>의 성능이 더 좋습니다.</p> + +<p>이에 더해, <code>textContent</code>는 <a href="/ko/docs/Glossary/Cross-site_scripting">XSS 공격</a>의 위험이 없습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음과 같은 HTML 조각에서...</p> + +<pre class="brush: html notranslate"><div id="divA">This is <span>some</span> text!</div></pre> + +<p><code>textContent</code>를 사용해 요소의 텍스트 콘텐츠를 가져오거나...</p> + +<pre class="brush: js notranslate">let text = document.getElementById('divA').textContent; +// The text variable is now: 'This is some text!'</pre> + +<p>텍스트 내용을 설정할 수 있습니다.</p> + +<pre class="brush: js notranslate">document.getElementById('divA').textContent = 'This text is different!'; +// The HTML for divA is now: +// <div id="divA">This text is different!</div> +</pre> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Node.textContent")}}</p> + +<h2 id="명세">명세</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="참고">참고</h2> + +<ul> + <li>{{domxref("HTMLElement.innerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> |