initial commit

1 files changed, 111 insertions, 0 deletions

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">&lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text!&lt;/div&gt;</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:
+// &lt;div id="divA"&gt;This text is different!&lt;/div&gt;
+</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>