---
title: Range
slug: Web/API/Range
tags:
  - API
  - DOM
translation_of: Web/API/Range
---
<p>{{APIRef("DOM")}}</p>

<p><strong><code>Range</code></strong> インターフェイスは、ノードやテキストノードの部品を含むことができる文書の断片を表します。</p>

<p>Range は {{domxref("document")}} オブジェクトの {{domxref("document.createRange", "createRange()")}} メソッドにより生成することができます。また、{{domxref("Selection")}} オブジェクトの {{domxref("Selection/getRangeAt", "getRangeAt()")}} メソッドや {{domxref("Document")}} オブジェクトの {{domxref("Document/caretRangeFromPoint", "caretRangeFromPoint()")}} メソッドにより取得することもできます。</p>

<p>さらに、{{domxref("Range.Range()", "Range()")}} コンストラクターも使用できます。</p>

<h2 id="Properties" name="Properties">プロパティ</h2>

<p><em>継承しているプロパティはありません。</em></p>

<dl>
 <dt>{{domxref("Range.collapsed")}} {{readonlyInline}}</dt>
 <dd>Range の始点と終点が同じ位置にあるか否かを示す {{domxref("Boolean")}} を返す</dd>
 <dt>{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}</dt>
 <dd><code>startContainer</code> と <code>endContainer</code> をともに含む、最も深い {{domxref("Node")}} を返す</dd>
 <dt>{{domxref("Range.endContainer")}} {{readonlyInline}}</dt>
 <dd><code>Range</code> の終点を含む {{domxref("Node")}} を返す</dd>
 <dt>{{domxref("Range.endOffset")}} {{readonlyInline}}</dt>
 <dd><code>endContainer</code> の中での <code>Range</code> の終点の位置を示す数字を返す</dd>
 <dt>{{domxref("Range.startContainer")}} {{readonlyInline}}</dt>
 <dd><code>Range</code> の始点を含む {{domxref("Node")}} を返す</dd>
 <dt>{{domxref("Range.startOffset")}} {{readonlyInline}}</dt>
 <dd><code>startContainer</code> の中での <code>Range</code> の始点の位置を示す数字を返す</dd>
</dl>

<h2 id="Constructor" name="Constructor">コンストラクター</h2>

<dl>
 <dt>{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}</dt>
 <dd>始点および終点がグローバルな {{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</code> の始点を設定</dd>
 <dt>{{ domxref("Range.setEnd()")}}</dt>
 <dd><code>Range</code> の終点を設定</dd>
 <dt>{{ domxref("Range.setStartBefore()")}}</dt>
 <dd>他の {{domxref("Node")}} を基準に <code>Range</code> の始点を設定</dd>
 <dt>{{ domxref("Range.setStartAfter()")}}</dt>
 <dd>他の {{domxref("Node")}} を基準に <code>Range</code> の始点を設定</dd>
 <dt>{{ domxref("Range.setEndBefore()")}}</dt>
 <dd>他の {{domxref("Node")}} を基準に <code>Range</code> の終点を設定</dd>
 <dt>{{ domxref("Range.setEndAfter()")}}</dt>
 <dd>他の {{domxref("Node")}} を基準に <code>Range</code> の終点を設定</dd>
 <dt>{{ domxref("Range.selectNode()")}}</dt>
 <dd><code>Range</code> を、ある {{domxref("Node")}} とその内容を含むように設定</dd>
 <dt>{{ domxref("Range.selectNodeContents()")}}</dt>
 <dd><code>Range</code> を、ある {{domxref("Node")}} の内容を含むように設定</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><code>Range</code> の中身を {{domxref("Document")}} から削除</dd>
 <dt>{{ domxref("Range.extractContents()")}}</dt>
 <dd><code>Range</code> の中身をドキュメントツリーから {{domxref("DocumentFragment")}} に移動</dd>
 <dt>{{ domxref("Range.insertNode()")}}</dt>
 <dd><code>Range</code> の始点に {{domxref("Node")}} を挿入</dd>
 <dt>{{ domxref("Range.surroundContents()")}}</dt>
 <dd><code>Range</code> の中身を新しい {{domxref("Node")}} の中に移動</dd>
 <dt>{{ domxref("Range.compareBoundaryPoints()")}}</dt>
 <dd>2 つの <code>Range</code> の端点の位置を比較</dd>
 <dt>{{ domxref("Range.cloneRange()")}}</dt>
 <dd>元の <code>Range</code> と同じ端点を持つ <code>Range</code> オブジェクトを返す</dd>
 <dt>{{ domxref("Range.detach()")}}</dt>
 <dd>パフォーマンスを改善するために、 <code>Range</code> を使用状態から開放</dd>
 <dt>{{ domxref("Range.toString()")}}</dt>
 <dd><code>Range</code> の内容を文字列として返す</dd>
 <dt>{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}</dt>
 <dd>{{domxref("Node")}} が range の前、後、中、外のうちのいずれの場所にあるかを示す定数を返す</dd>
 <dt>{{ domxref("Range.comparePoint()")}} {{experimental_inline}}</dt>
 <dd>指定された点が <code>Range</code> の前、中、後のうちのいずれの場所にあるかを -1、0、1 で示す</dd>
 <dt>{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}</dt>
 <dd>渡された文字列から生成した {{domxref("DocumentFragment")}} を返す</dd>
 <dt>{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}</dt>
 <dd><code>Range</code> の内容の全体に結びつく {{domxref("DOMRect")}} オブジェクトを返します。これは、{{domxref("Range.getClientRects()")}} が返すすべての長方形の集合体です。</dd>
 <dt>{{ domxref("Range.getClientRects()") }} {{experimental_inline}}</dt>
 <dd><code>Range</code> 内のすべての要素について、{{domxref("Element.getClientRects()")}} の結果をまとめた {{domxref("DOMRect")}} オブジェクトのリストを返します。</dd>
 <dt>{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}</dt>
 <dd>指定ノードの範囲が <code>Range</code> と交差するか否かを示す <code>boolean</code> を返す</dd>
 <dt>{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}</dt>
 <dd>与えられた点が <code>Range</code> の中にあるか否かを示す <code>boolean</code> を返す</dd>
</dl>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>今後は <code>RangeException</code> は使用せず、代わりに <code>DOMException</code> を使用します。<br>
    <code>collapse()</code> の第 2 引数を省略可能に変更。<br>
    <code>isPointInRange()</code>, <code>comparePoint()</code>, <code>intersectsNode()</code> メソッドを追加。<br>
    <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><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><code>getClientRects()</code> および <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>s初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("api.Range")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/DOM/DOM_Reference" title="DOM/DOM_Reference">DOM インターフェイスの索引</a></li>
</ul>