Selection
AbstractRange は抽象インターフェイスで、すべての DOM の範囲型を定義するための基本クラスです。 range は、文書内のコンテンツの区間の開始点と終了点を示すオブジェクトです。
メモ: 抽象インターフェイスであるため、 AbstractRange 型のオブジェクトを直接インスタンス化することはありません。代わりに Range または StaticRange インターフェイスを使用してください。これら 2 つのインターフェイスの異なる点を理解し、自分のニーズに合ったものを選ぶには、それぞれのインターフェイスのドキュメントを参照してください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| 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 |
- このバージョンで機能が削除されました (79)
- このバージョンで機能が削除されました (79)
- このバージョンで機能が削除されました (79)
- このバージョンで機能が削除されました (79)
- このバージョンで機能が削除されました (79)
- このバージョンで機能が削除されました (79)
- このブラウザでは部分的にしか実装されていません
- このバージョンで機能が削除されました (57)
- すべての `Document` オブジェクトではなく、`HTMLDocument` に対してのみサポートされている。
- Chrome 127 より前のバージョンでは、`selectionchange` イベントは `Document` で発生していた。<input>` 要素でイベントを発生させるには、バグ 40840956 を参照してください。
- Edge 127 より前のバージョンでは、`selectionchange` イベントは `Document` に対して発生しました。<input>`要素でイベントを発生させるには、バグ 40840956 を参照してください。
- Safari 18 以前では、`selectionchange` イベントは `Document` で発生しました。<input>`要素でイベントを発生させるには、bug 271033を参照してください。
- Chrome Android 127 より前のバージョンでは、`selectionchange` イベントは `Document` で発生していた。<input>` 要素でイベントを発生させるには、バグ 40840956 を参照してください。
- iOS 18 の Safari より前のバージョンでは、`selectionchange` イベントは `Document` で発生していました。<input>` 要素でイベントを発生させる方法については bug 271033 を参照してください。
- Chrome 127 より前のバージョンでは、`selectionchange` イベントは `Document` で発生していた。<textarea>`要素でイベントを発生させるには、バグ 40840956 を参照してください。
- Edge 127 より前のバージョンでは、`selectionchange` イベントは `Document` で発生しました。<textarea>`要素でイベントを発生させるには、バグ 40840956 を参照してください。
- Safari 18 以前では `Document` に対して `selectionchange` イベントが発生しました。<textarea>`要素でイベントを発生させる方法についてはバグ 271033 を参照してください。
- Chrome Android 127 より前のバージョンでは、`selectionchange` イベントは `Document` で発生していた。<textarea>`要素でイベントを発生させるには、バグ 40840956 を参照してください。
- iOS 18 の Safari より前のバージョンでは、`selectionchange` イベントは `Document` で発生しました。<textarea>`要素でイベントを発生させる方法についてはバグ 271033 を参照してください。
- Firefox 13 から、`Range` オブジェクトは、以前の仕様で定義されていた `RangeException` ではなく、DOM 4 で定義されている `DOMException` をスローするようになりました。
- Firefox 35 より前のバージョンでは、このメソッドは `node` が `null` の場合にスローしませんでした。
- Firefox 139 より前のバージョンでは、フォーム要素で選択されたテキストに対して `toString()` は空文字列を返します。バグ 85686 を参照してください。
- Firefoxでは、`StaticRange`は現在のところ、ブラウザ内部のコードか、パーミッションが強化されたコードによってのみ使用できる。
基本構文
const selection = window.getSelection();
const text = selection.toString();
console.log('Selected text:', text);
// Clear the selection
selection.removeAllRanges(); ライブデモ
実務での使いどころ
-
Selection の活用
AbstractRange は抽象インターフェイスで、すべての DOM の範囲型を定義するための基本クラスです。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。