diff options
Diffstat (limited to 'files/ko/web/api/range/index.html')
| -rw-r--r-- | files/ko/web/api/range/index.html | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/files/ko/web/api/range/index.html b/files/ko/web/api/range/index.html new file mode 100644 index 0000000000..48f236762a --- /dev/null +++ b/files/ko/web/api/range/index.html @@ -0,0 +1,142 @@ +--- +title: range +slug: Web/API/Range +tags: + - API + - DOM + - Reference +translation_of: Web/API/Range +--- +<p>{{ APIRef("DOM") }}</p> + +<p><strong><code>Range</code></strong> 객체는 주어진 document 내의 텍스트 노드들의 부분들(parts)과 document의 단편화에 포함된 노드들을 나타내고 있다.</p> + +<p>Range 오브젝트는 <code><a href="ko/DOM/document">Document</a></code> 객체에 포함되어 있는 <code><a href="ko/DOM/document.createRange">createRange</a></code> 메소드를 사용하여 생성할 수 있다. 또한 <code><a href="ko/DOM/Selection">selection</a></code> 객체에 포함되어 있는 <code><a href="ko/DOM/Selection/getRangeAt">getRangeAt</a></code> 메소드를 사용하여 추출할 수 있다.</p> + +<p>{{domxref("Range.Range()", "Range()")}} 생성자 또한 사용 가능하다.</p> + +<h2 id="Properties" name="Properties">속성</h2> + +<dl> + <dt><a href="ko/DOM/range.collapsed">collapsed</a></dt> + <dd>Range의 시작점과 끝점이 같인 위치인지를 알 수 있는 boolean 값을 반환한다.</dd> + <dt><a href="ko/DOM/range.commonAncestorContainer">commonAncestorContainer</a></dt> + <dd>startContainer와 endContainer 노드들을 포함한 최상위 노드를 반환한다.</dd> + <dt><a href="ko/DOM/range.endContainer">endContainer</a></dt> + <dd>Range의 끝 위치를 포함하는 Node를 반환한다.</dd> + <dt><a href="ko/DOM/range.endOffset">endOffset</a></dt> + <dd>endContainer 안에 있는 Range 끝을 나타내는 숫자(offset)를 반환한다.</dd> + <dt><a href="ko/DOM/range.startContainer">startContainer</a></dt> + <dd>Range의 시작 위치를 포함하는 Node를 반환한다.</dd> + <dt><a href="ko/DOM/range.startOffset">startOffset</a></dt> + <dd>startContainer 안에 있는 Range 시작을 나타내는 숫자(offset)를 반환한다.</dd> +</dl> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}</dt> + <dd><code>Range</code> 객체의 시작과 끝에 따라 전역 {{domxref("Document")}} 와 함께 <code>Range</code> 객체를 반환한다.</dd> +</dl> + +<h2 id="Methods" name="Methods">메서드</h2> + +<p><em>상속한 메서드는 없다.</em></p> + +<dl> + <dt>{{ domxref("Range.setStart()")}}</dt> + <dd><code>Range<font face="Open Sans, Arial, sans-serif"> 의 시작 위치를 설정한다</font></code>.</dd> + <dt>{{ domxref("Range.setEnd()")}}</dt> + <dd><code>Range<font face="Open Sans, Arial, sans-serif"> 의 끝 위치를 설정한다</font></code>.</dd> + <dt>{{ domxref("Range.setStartBefore()")}}</dt> + <dd>다른 {{ domxref("Node") }} 와 관계가 있는 <code>Range<font face="Open Sans, Arial, sans-serif"> 의 시작 위치를 설정한다</font></code>.</dd> + <dt>{{ domxref("Range.setStartAfter()")}}</dt> + <dd>다른 {{ domxref("Node") }} 와 관계가 있는 <code>Range<font face="Open Sans, Arial, sans-serif"> 의 시작 위치를 설정한다</font></code>.</dd> + <dt>{{ domxref("Range.setEndBefore()")}}</dt> + <dd>다른 {{ domxref("Node") }} 와 관계가 있는 <code>Range<font face="Open Sans, Arial, sans-serif"> 의 끝 위치를 설정한다</font></code>.</dd> + <dt>{{ domxref("Range.setEndAfter()")}}</dt> + <dd>다른 {{ domxref("Node") }} 와 관계가 있는 <code>Range<font face="Open Sans, Arial, sans-serif"> 의 끝 위치를 설정한다</font></code>.</dd> + <dt>{{ domxref("Range.selectNode()")}}</dt> + <dd><code>Range<font face="Open Sans, Arial, sans-serif"> 에 </font></code>{{ domxref("Node") }} 와 그것의 내용물을 포함 시킨<code><font face="Open Sans, Arial, sans-serif">다</font></code>.</dd> + <dt>{{ domxref("Range.selectNodeContents()")}}</dt> + <dd><code>Range<font face="Open Sans, Arial, sans-serif"> 에 </font></code>{{ domxref("Node") }} 의 내용물을 포함 시킨<code><font face="Open Sans, Arial, sans-serif">다</font></code>.</dd> + <dt>{{ domxref("Range.collapse()")}}</dt> + <dd><code>Range</code> 의 경계 지점 중 하나로 영역을 붕괴 시킨다.</dd> + <dt>{{ domxref("Range.cloneContents()")}}</dt> + <dd><code>Range</code> 의 노드들을 복사하여 {{ domxref("DocumentFragment") }} 를 반환한다.</dd> + <dt>{{ domxref("Range.deleteContents()")}}</dt> + <dd>{{ domxref("Document") }} 로 부터 <code>Range</code> 의 컨텐츠들을 삭제한다.</dd> + <dt>{{ domxref("Range.extractContents()")}}</dt> + <dd>{{ domxref("Document") }} 트리로 부터 <code>Range</code> 의 컨텐츠들을 domxref("DocumentFragment") }} 로 이동시킨다.</dd> + <dt>{{ domxref("Range.insertNode()")}}</dt> + <dd><code>Range</code> 의 맨 앞에 {{ domxref("Node") }}를 삽입한다.</dd> + <dt>{{ domxref("Range.surroundContents()")}}</dt> + <dd>Moves content of a <code>Range</code> into a new {{ domxref("Node") }}.</dd> + <dt>{{ domxref("Range.compareBoundaryPoints()")}}</dt> + <dd>Compares the boundary points of the <code>Range</code> with another <code>Range</code>.</dd> + <dt>{{ domxref("Range.cloneRange()")}}</dt> + <dd>Returns a <code>Range</code> object with boundary points identical to the cloned <code>Range</code>.</dd> + <dt>{{ domxref("Range.detach()")}}</dt> + <dd>Releases the <code>Range</code> from use to improve performance.</dd> + <dt>{{ domxref("Range.toString()")}}</dt> + <dd>Returns the text of the <code>Range</code>.</dd> + <dt>{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}</dt> + <dd>Returns a constant representing whether the {{domxref("Node")}} is before, after, inside, or surrounding the range.</dd> + <dt>{{ domxref("Range.comparePoint()")}} {{experimental_inline}}</dt> + <dd>Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the <code>Range</code>.</dd> + <dt>{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}</dt> + <dd>Returns a {{ domxref("DocumentFragment") }} created from a given string of code.</dd> + <dt>{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}</dt> + <dd>Returns a {{ domxref("ClientRect") }} object which bounds the entire contents of the <code>Range</code>; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.</dd> + <dt>{{ domxref("Range.getClientRects()") }} {{experimental_inline}}</dt> + <dd>Returns a list of {{ domxref("ClientRect") }} objects that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the <code>Range</code>.</dd> + <dt>{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}</dt> + <dd>Returns a <code>boolean</code> indicating whether the given node intersects the <code>Range</code>.</dd> + <dt>{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}</dt> + <dd>Returns a <code>boolean</code> indicating whether the given point is in the <code>Range</code>.</dd> +</dl> + +<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('DOM WHATWG', '#interface-range', 'Range')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Do not use <code>RangeException</code> anymore, use <code>DOMException</code> instead.<br> + Made the second parameter of <code>collapse()</code> optional.<br> + Added the methods <code>isPointInRange()</code>, <code>comparePoint()</code>, and <code>intersectsNode()</code>.<br> + Added the constructor <code>Range()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Added the method <code>createContextualFragment()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the methods <code>getClientRects()</code> and <code>getBoundingClientRect()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("api.Range")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> |