---
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>