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
143
144
145
146
147
|
---
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>
|
