Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
90
90
69
14.1
90
14.5

collapsed は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の開始位置と終了位置が同じであれば true を返します。

90
90
69
14.1
90
14.5

endContainer は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の末尾がある Node を返します。

90
90
69
14.1
90
14.5

endOffset は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の末尾の位置の、最後のノードの中におけるオフセットを返します。

90
90
69
14.1
90
14.5

startContainer は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の先頭の Node を返します。

90
90
69
14.1
90
14.5

startOffset は AbstractRange インターフェイスの読み取り専用プロパティで、開始ノードにおける範囲の開始位置のオフセットを返します。

90
90
69
14.1
90
14.5

Document.createRange() メソッドは、新しい Range オブジェクトを返します。

1
12
1
1
18
1

getSelection() は Document インターフェイスのメソッドで、ユーザーが選択したテキストの範囲、またはキャレットの現在位置を表す Selection オブジェクトを返します。

2
12
57
4
18
3.2

selectionchange イベントは Selection API の一部で、文書における現在のテキストの選択が変更された際に発生します。

11
12
52
5.1
18
5

selectionchange は選択 API のイベントで、 input 要素の中でテキストの選択状態が変化したときに発行されます。 これは、文字単位の選択範囲位が変化した場合も、キャレットが移動したときも含みます。

127
127
92
18
127
18

selectionchange は選択 API のイベントで、textarea 要素内のテキストの選択状態が変更されたときに発生します。 これは、文字の選択範囲の変更と、キャレットが移動した場合の両方を含みます。

127
127
92
18
127
18

selectstart は選択 API のイベントで、新しい選択範囲をユーザーが指定した際に発行されます。

1
12
52
1.3
18

Range インターフェイスは、特定のノードやテキストノードの部分を含むことができる文書の範囲を表します。

1
12
1
1
18
1

Range.cloneContents() は、 に含まれる 型のオブジェクトをコピーした を返します。

1
12
1
1
18
1

Range.cloneRange() メソッドは、複製された Range と同じ境界点を持つ Range オブジェクトを返します。

1
12
1
1
18
1

Range.collapse() メソッドは、 Range を境界点の一つに折りたたみます。

1
12
1
1
18
1
collapse (toStart parameter optional)

toStart`パラメータはオプションです。

1
16
25
1
18
1

collapsed は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の開始位置と終了位置が同じであれば true を返します。

1
12
1
1
18
1

Range.commonAncestorContainer は読み取り専用のプロパティで、この Range の両方の境界点を含む、最も深い — または文書ツリー内で最も遠い — ノード (Node) を返します。つまり、Range.startContainer と Range.endContainer 両方が同じノードを参照する場合は、このノードは共通の祖先コンテナーです。

1
12
1
1
18
1

Range.compareBoundaryPoints() メソッドは、 Range の境界点を別の範囲のものと比較します。

1
12
1
1
18
1

Range.comparePoint() メソッドは、 -1、0、1 を返します。それぞれ、 referenceNode が Range の前か、同じか、後かを返します。

1
17
1
3
18
1

Range.createContextualFragment() メソッドは、範囲の先頭ノード(選択されたノードの親)をコンテキストノードとして、 HTML フラグメント構文解析アルゴリズムまたは XML フラグメント構文解析アルゴリズムを呼び出して DocumentFragment を返します。 HTML フラグメント解釈アルゴリズムは、範囲が HTMLness ビットが設定された Document に属している場合に使用します。 HTML では、コンテキストノードが html である場合、歴史的な理由から、フラグメント解釈アルゴリズムは body をコンテキストとして呼び出されます。

1
12
1
1
18
1

Range.deleteContents() メソッドは のコンテンツを から取り除きます。

1
12
1
1
18
1

endContainer は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の末尾がある Node を返します。

1
12
1
1
18
1

endOffset は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の末尾の位置の、最後のノードの中におけるオフセットを返します。

1
12
1
1
18
1

Range.extractContents() は の内容をこの文書ツリーから へ移動させます。

1
12
1
1
18
1

Range.getBoundingClientRect() メソッドは、範囲のコンテンツを囲む オブジェクトを返します。これは、範囲内のすべての要素の外接長方形の和を囲む長方形です。

4
12
4
5
18
4

Range.getClientRects() メソッドは、範囲が占める画面の領域を表す オブジェクトのリストを返します。これは、 を呼び出した結果を集約して作成されます。

4
12
4
5
18
4

Range.insertNode() メソッドは Range の先頭にノードを挿入します。

1
12
1
1
18
1

Range.intersectsNode() メソッドは、指定された Node が Range と交差しているかどうかを示す論理値を返します。

1
17
17
3
18
1

Range.isPointInRange() メソッドは、指定されたこの点が Range 内にあるかどうかを示す論理値を返します。このメソッドは ReferenceNode 内の offset にある点(カーソル位置)がこの範囲内にある場合に true を返します。

1
15
1
3
18
1

Range() コンストラクターは、グローバルな Document オブジェクトを始点および終点とする、新しく作成された Range オブジェクトを返します。

29
15
24
8
29
8

The Range.selectNode() メソッドは Range に Node とその内容を格納するように設定します。 Range の始めと終わりの親 Node は referenceNode の親と同じになります。

1
12
1
1
18
1

Range.selectNodeContents() メソッドは Range が Node のコンテンツを含むように設定します。

1
12
1
1
18
1

Range.setEnd() メソッドは の終了位置を指定されたノードの指定されたオフセットに設定します。 終点を始点より上(文書内の高い位置)に設定すると、始点と終点の両方が指定した終点位置に設定された、折りたたまれた範囲になります。

1
12
1
1
18
1

Range.setEndAfter() メソッドは Range の終了位置を別の Node から相対的に設定します。この Range の終了位置の親 Node は referenceNode と同じになります。

1
12
1
1
18
1

Range.setEndBefore() メソッドは、 Range の終了位置を別の Node からの相対位置で設定します。 Range の終了位置の親 Node は referenceNode と同じになります。

1
12
1
1
18
1

Range.setStart() メソッドは、 の開始位置を設定します。

1
12
1
1
18
1

Range.setStartAfter() メソッドは Node に対する Range の開始位置を設定します。 Range の開始位置の親 Node は referenceNode と同じになります。

1
12
1
1
18
1

Range.setStartBefore() メソッドは Range の開始位置を別の Node からの相対位置で設定します。 Range の開始位置の親 Node は referenceNode と同じになります。

1
12
1
1
18
1

startContainer は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の先頭の Node を返します。

1
12
1
1
18
1

startOffset は AbstractRange インターフェイスの読み取り専用プロパティで、開始ノードにおける範囲の開始位置のオフセットを返します。

1
12
1
1
18
1

Range.surroundContents() メソッドは の内容を新しいノードに移動し、新しいノードを指定された範囲の先頭に配置します。

1
12
1
1
18
1

Range.toString() メソッドはstringifierで、 Range のテキストを返します。

1
12
1
1
18
1

Selection オブジェクトは、ユーザーが選択したテキストの範囲、またはキャレットの現在の位置を表します。検査や操作のために Selection オブジェクトを取得するには、 window.getSelection() を呼び出してください。

1
12
1
1.3
18
1

Selection.addRange() メソッドは、Selection に Range を追加します。

1
12
1
3
18
1

Selection.anchorNode読み取り専用プロパティは、選択範囲を開始するノードを返します。選択範囲がドキュメント内に存在しなかった場合(クリックされなかったiframeや、ノードが別のドキュメントツリーに属している場合など)、NULLを返すことがあります。

1
12
1
1.3
18
1

Selection.anchorOffset読み取り専用プロパティは、Selection.anchorNodeがText型、CDATASection型、Comment型の場合、選択範囲のアンカーがSelection.anchorNode内でオフセットされている文字数を返します。

1
12
1
1.3
18
1

Selection.collapse() メソッドは、現在の選択範囲を一点に折りたたみます。ドキュメントは変更されません。コンテンツがフォーカスされていて編集可能な場合、キャレットはそこで点滅します。

1
12
1
1.3
18
1

Selection.collapseToEnd()メソッドは、選択範囲を選択範囲の最後の範囲の終わりまで折りたたみます。選択範囲の内容がフォーカスされていて編集可能な場合、キャレットはそこで点滅します。

1
12
1
1.3
18
1

選択範囲内の最初の範囲の先頭まで選択範囲を縮小します。選択されている内容が編集可能であり且つフォーカス状態なら、その地点でキャレットが点滅します。

1
12
1
1.3
18
1

Selection.containsNode() メソッドは、指定されたノードが選択範囲に含まれるかどうかを示します。

1
12
1
3.1
18
2

Selection インターフェイスの deleteFromDocument() メソッドは、選択された Range に対して Range.deleteContents() メソッドを呼び出します。

1
12
1
3.1
18
2

Selectionインターフェイスのdirection読み取り専用プロパティは、現在の選択範囲の方向を示す文字列です。

137
137
126
17
137
17

Selection.empty() メソッドは、選択範囲からすべての範囲を削除し、Selection.anchorNode プロパティと Selection.focusNode プロパティは null に等しく、何も選択されていない状態にします。このメソッドが呼び出されると、ドキュメントで Document/selectionchange_event イベントが発生します。

1
12
55
1.3
18
1

Selection.extend()メソッドは、選択範囲のフォーカスを指定したポイントに移動させます。選択範囲のアンカーは移動しません。選択範囲は、方向に関係なく、アンカーから新しいフォーカスまでとなります。

1
12
1
3.1
18
2

Selection.focusNode読み取り専用プロパティは、選択が終了したノードを返します。選択範囲がドキュメント内に存在しなかった場合(クリックされなかったiframeや、ノードが別のドキュメントツリーに属している場合など)、NULLを返すことがあります。

1
12
1
1.3
18
1

Selection.focusOffset読み取り専用プロパティは、Selection.focusNodeがText型、CDATASection型、Comment型の場合に、選択範囲のフォーカスがSelection.focusNode内にオフセットされている文字数を返します。

1
12
1
1.3
18
1

Selection インターフェイスの getRangeAt() メソッドは、現在選択されている範囲を表す範囲オブジェクトを返します。

1
12
1
3
18
1

Selection.isCollapsed読み取り専用プロパティは、現在テキストが選択されているかどうかを示すブール値を返します。選択範囲の始点と終点がコンテンツ内の同じ位置にある場合、テキストは選択されていません。

1
12
1
1.3
18
1

Selection.modify()メソッドは、単純なテキスト・コマンドを使用して、現在の選択範囲またはカーソル位置に変更を加えます。

1
79
4
1.3
18
1

Selection.rangeCount(読み取り専用)プロパティは、選択範囲内の範囲の数を返します。

1
12
1
3
18
1

Selection.removeAllRanges() メソッドは、選択範囲からすべての範囲を削除し、Selection.anchorNode プロパティと Selection.focusNode プロパティは NULL に等しく、何も選択されていない状態にします。このメソッドが呼び出されると、ドキュメントで Document/selectionchange_event イベントが発生します。

1
12
1
3
18
1

Selection.removeRange() メソッドは、選択範囲から範囲を削除します。

58
12
1
17
58
17

Selection.selectAllChildren()メソッドは、指定されたノードのすべての子を選択範囲に追加します。以前の選択は失われます。

1
12
1
3.1
18
2

Selection インターフェイスの setBaseAndExtent() メソッドは、指定した 2 つの DOM ノードのすべてまたは一部と、その間にあるコンテンツを含む範囲を選択範囲に設定します。

1
12
53
1.3
18
1

Selection.setPosition()メソッドは、現在の選択範囲を1点に折りたたみます。ドキュメントは変更されません。コンテンツがフォーカスされていて編集可能な場合、キャレットはそこで点滅します。

1
14
55
1.3
18
1

Selection.toString()メソッドは、選択オブジェクトが現在表現している文字列、つまり現在選択されているテキストを返します。

1
12
1
1.3
18
1

Selection インターフェイスの type 読み取り専用プロパティは、現在の選択範囲のタイプを表す文字列を返します。

1
12
57
1.3
18
1

DOM の StaticRange インターフェイスは AbstractRange を拡張し、 DOM ツリー内で発生した変更を反映しない、 DOM 内のコンテンツの範囲を指定するメソッドを提供します。

60
18
69
10.1
60
10.3

collapsed は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の開始位置と終了位置が同じであれば true を返します。

60
18
69
10.1
60
10.3

endContainer は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の末尾がある Node を返します。

60
18
69
10.1
60
10.3

endOffset は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の末尾の位置の、最後のノードの中におけるオフセットを返します。

60
18
69
10.1
60
10.3

startContainer は AbstractRange インターフェイスの読み取り専用プロパティで、範囲の先頭の Node を返します。

60
18
69
10.1
60
10.3

startOffset は AbstractRange インターフェイスの読み取り専用プロパティで、開始ノードにおける範囲の開始位置のオフセットを返します。

60
18
69
10.1
60
10.3

StaticRange() コンストラクターは、 DOM 内のコンテンツの範囲を表す新しい StaticRange オブジェクトを作成します。

90
90
71
13.1
90
13.4

Window.getSelection() メソッドは、ユーザーが選択した文字列の範囲やキャレットの現在位置を示す Selection オブジェクトを返します。

1
12
1
1
18
1
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (57)
実装メモ
  • すべての `Document` オブジェクトではなく、`HTMLDocument` に対してのみサポートされている。
注釈 1件
実装メモ
  • Chrome 127 より前のバージョンでは、`selectionchange` イベントは `Document` で発生していた。<input>` 要素でイベントを発生させるには、バグ 40840956 を参照してください。
注釈 1件
実装メモ
  • Edge 127 より前のバージョンでは、`selectionchange` イベントは `Document` に対して発生しました。<input>`要素でイベントを発生させるには、バグ 40840956 を参照してください。
注釈 1件
実装メモ
  • Safari 18 以前では、`selectionchange` イベントは `Document` で発生しました。<input>`要素でイベントを発生させるには、bug 271033を参照してください。
注釈 1件
実装メモ
  • Chrome Android 127 より前のバージョンでは、`selectionchange` イベントは `Document` で発生していた。<input>` 要素でイベントを発生させるには、バグ 40840956 を参照してください。
注釈 1件
実装メモ
  • iOS 18 の Safari より前のバージョンでは、`selectionchange` イベントは `Document` で発生していました。<input>` 要素でイベントを発生させる方法については bug 271033 を参照してください。
注釈 1件
実装メモ
  • Chrome 127 より前のバージョンでは、`selectionchange` イベントは `Document` で発生していた。<textarea>`要素でイベントを発生させるには、バグ 40840956 を参照してください。
注釈 1件
実装メモ
  • Edge 127 より前のバージョンでは、`selectionchange` イベントは `Document` で発生しました。<textarea>`要素でイベントを発生させるには、バグ 40840956 を参照してください。
注釈 1件
実装メモ
  • Safari 18 以前では `Document` に対して `selectionchange` イベントが発生しました。<textarea>`要素でイベントを発生させる方法についてはバグ 271033 を参照してください。
注釈 1件
実装メモ
  • Chrome Android 127 より前のバージョンでは、`selectionchange` イベントは `Document` で発生していた。<textarea>`要素でイベントを発生させるには、バグ 40840956 を参照してください。
注釈 1件
実装メモ
  • iOS 18 の Safari より前のバージョンでは、`selectionchange` イベントは `Document` で発生しました。<textarea>`要素でイベントを発生させる方法についてはバグ 271033 を参照してください。
注釈 1件
実装メモ
  • Firefox 13 から、`Range` オブジェクトは、以前の仕様で定義されていた `RangeException` ではなく、DOM 4 で定義されている `DOMException` をスローするようになりました。
注釈 1件
実装メモ
  • Firefox 35 より前のバージョンでは、このメソッドは `node` が `null` の場合にスローしませんでした。
注釈 1件
実装メモ
  • Firefox 139 より前のバージョンでは、フォーム要素で選択されたテキストに対して `toString()` は空文字列を返します。バグ 85686 を参照してください。
注釈 1件
実装メモ
  • Firefoxでは、`StaticRange`は現在のところ、ブラウザ内部のコードか、パーミッションが強化されたコードによってのみ使用できる。

基本構文

JAVASCRIPT
const selection = window.getSelection();
const text = selection.toString();
console.log('Selected text:', text);
// Clear the selection
selection.removeAllRanges();

ライブデモ

Textselection. Read

yu-za- that selectiontext read / display. with Selection API

プレビュー全画面表示

Selectionrange. styling

::selection pseudoelement in selection time. show kastamize.

プレビュー全画面表示

Selection API Method

Textselection operation. Mainmethod.

プレビュー全画面表示

実務での使いどころ

  • Selection の活用

    AbstractRange は抽象インターフェイスで、すべての DOM の範囲型を定義するための基本クラスです。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。