1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
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>
|
