備忘録的プログラミングリファレンス

Selection インターフェイス

window.getSelection()
Document.getSelection()

　Selection インターフェイスとは、テキストを選択状態にするための方法を定義したインターフェイスです。
　テキストの選択状態とは、テキストをマウスなどのデバイスを使って文章の一部を選択すると強調表示になる状態のことです。

選択中の Node をコンソールに表示 
console.log( getSelection().anchorNode );
詳しくはExampleを参照してください

　テキストの選択に関する Selection オブジェクトは、 window.getSelection() または Document.getSelection() で取得します。

　このインターフェイスに、anchor と focus というフレーズがありますが、選択開始を anchor として扱い、選択終了を focus として扱っています。
　 選択開始位置が Node オブジェクトが示すテキスト中の何文字目かを anchorOffset で。選択終了位置が、その Node オブジェクトにおいて何文字目かを focusOffset で返します。選択範囲は range です。

プロパティ(Properties)

Property概要
.anchorNodeテキストの選択開始位置にある Node オブジェクトを返す
.anchorOffset.anchorNode のテキストの先頭から何文字目までが選択されていないか
.focusNodeテキストの選択終了位置にある Node オブジェクトを返す
.focusOffset.focusNode のテキストの先頭から何文字目までが選択されているか
.isCollapsedテキストの選択開始位置と終了位置が同じであるか／否か。 Boolean 型で返す
.rangeCount選択数を返す
.type選択された方法をNone、Caret、Rangeというタイプ名で返す

メソッド(Methods)

Method概要
.addRange() Range オブジェクトに指定された範囲を追加する。詳しくは Range インターフェイスを参照
.collapse()選択を解除。キャレットを指定の Node に留める。引数を指定しない場合は .removeAllRanges() と同じ
.extend()指定された Node の指定された数分だけ選択範囲を拡げる
.collapseToStart()選択範囲を解除しキャレットをその始点に移動
.collapseToEnd()選択範囲を解除しキャレットをその終点に移動
.selectAllChildren()指定 Node の全ての内容を選択
.addRange();選択範囲を拡げる。FireFoxのみ
.removeRange()引数に Range オブジェクトを指定。Range オブジェクト分を選択から除く
.removeAllRanges()選択を解除
.deleteFromDocument()選択範囲を削除
.toString()Selection オブジェクトを文字列に変換。JavaScriptではなくても自動で文字列に変換される
.containsNode()指定　Node が含まれているかを Boolean 型で返す

Example 編集不可能なコンテンツ

　getSelection()の例です。以下のテキストを適当に選択し、選択状態を確かめるボタンをクリックして下さい。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

Example 編集可能なエレメント <textarea>

　getSelection()を 編集可能なエレメント <textarea> の例です。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。