diff options
Diffstat (limited to 'files/ko/web/api/text/splittext/index.html')
-rw-r--r-- | files/ko/web/api/text/splittext/index.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/files/ko/web/api/text/splittext/index.html b/files/ko/web/api/text/splittext/index.html new file mode 100644 index 0000000000..dd45f3b83d --- /dev/null +++ b/files/ko/web/api/text/splittext/index.html @@ -0,0 +1,95 @@ +--- +title: Text.splitText() +slug: Web/API/Text/splitText +tags: + - API + - DOM + - Text + - 메소드 +translation_of: Web/API/Text/splitText +--- +<div>{{apiref("DOM")}}</div> + +<p><strong><code>Text.splitText()</code></strong> 메소드는 {{domxref("Text")}} 노드를 지정된 오프셋에서 두 노드로 분리합니다. 두 노드는 sibling으로써 트리에 유지됩니다.</p> + +<p>분리한 이후, 현재 노드는 지정된 오프셋 지점까지의 모든 컨텐츠를 포함하며, 새롭게 생성된 같은 타입의 노드는 남아있는 텍스트를 포함합니다. 새롭게 생성된 노드는 호출자에게 반환됩니다. 기존 노드가 부모를 갖고 있다면, 새 노드는 기존 노드의 다음 sibling으로 삽입됩니다. 기존 노드의 길이와 오프셋이 동일하다면, 새롭게 생성된 노드는 데이터를 갖지 않습니다.</p> + +<p>분리된 텍스트 노드는 {{domxref("Node.normalize()")}} 메소드를 사용해 이어붙혀질 수 있습니다.</p> + +<p>지정된 오프셋이 음수이거나 노드의 텍스트의 16 비트 단위의 수보다 크면 <code>INDEX_SIZE_ERR</code> 값을 갖는 {{domxref("DOMException")}} 을 throw됩니다. <code>NO_MODIFICATION_ALLOWED_ERR</code> 값을 갖는 {{domxref("DOMException")}} 은 노드가 읽기 전용일 때 throw됩니다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox"><em>replacementNode</em> = <em>textnode</em>.splitText(offset) +</pre> + +<h2 id="예제">예제</h2> + +<p>이 예제에서 {{HTMLElement("p")}} 텍스트 노드는 두 텍스트 노드로 분리되며 그 사이에 {{HTMLElement("span")}} 이 삽입됩니다.</p> + +<pre class="brush:html"><body> + <p id="p">foobar</p> + + <script type="text/javascript"> + var p = document.getElementById('p'); + var textnode = p.firstChild; + + // foo 와 bar 사이를 분리 + var replacementNode = textnode.splitText(3); + + // ' span contents ' 를 포함하는 span을 생성 + var span = document.createElement('span'); + span.appendChild(document.createTextNode(' span contents ')); + + // 'bar' 앞에 span을 추가 + p.insertBefore(span, replacementNode); + + // 결과: <p id="p">foo<span> span contents </span>bar</p> + </script> +</body> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-text-splittext', 'Text.splitText')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>{{SpecName('DOM3 Core')}} 로부터 변경 사항 없음.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>{{SpecName('DOM2 Core')}} 로부터 변경 사항 없음.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>{{SpecName('DOM1')}} 로부터 변경 사항 없음.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-38853C1D', 'Text.splitText')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Text.splitText")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>이 메소드가 속한 {{domxref("Text")}} 인터페이스.</li> + <li>반대되는 메소드: {{domxref("Node.normalize")}}.</li> +</ul> |