diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/api/range | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/ko/web/api/range')
-rw-r--r-- | files/ko/web/api/range/index.html | 142 | ||||
-rw-r--r-- | files/ko/web/api/range/selectnodecontents/index.html | 68 |
2 files changed, 210 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> diff --git a/files/ko/web/api/range/selectnodecontents/index.html b/files/ko/web/api/range/selectnodecontents/index.html new file mode 100644 index 0000000000..380d600622 --- /dev/null +++ b/files/ko/web/api/range/selectnodecontents/index.html @@ -0,0 +1,68 @@ +--- +title: Range.selectNodeContents() +slug: Web/API/Range/selectNodeContents +tags: + - API + - DOM + - Method + - Range +translation_of: Web/API/Range/selectNodeContents +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Range.selectNodeContents()</code></strong>는 {{domxref("Node")}}의 내용을 포함하는 {{domxref("Range")}}를 설정합니다.</p> + +<p>부모 {{ domxref("Node") }} 의 start, end 값이 Reference가 됩니다. <code>startOffset</code> 은 0이고, <code>endOffset</code> 은 Child Node의 수 혹은 Reference Node에 포함되어 있는 Child Node의 수가 됩니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>range</em>.selectNodeContents(<em>referenceNode</em>); +</pre> + +<h3 id="Parameters" name="Parameters">매개변수</h3> + +<dl> + <dt><code><em>referenceNode</em></code></dt> + <dd>{{ domxref("Range") }} 로 선택될 내용의 {{ domxref("Node") }} </dd> +</dl> + +<h2 id="Example" name="Example">예제</h2> + +<pre class="brush: js">range = document.createRange(); +referenceNode = document.getElementsByTagName("div")[0]; +range.selectNodeContents(referenceNode); +</pre> + +<h2 id="Specification" name="Specification">명세</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', '#dom-range-selectnodecontents', 'Range.selectNodeContents()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNodeContents', 'Range.selectNodeContents()')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.Range.selectNodeContents")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> |