js STUDIO

選択箇所(Selection)

これは実験的な技術であるため、仕様が明確に定まっていません。 各ブラウザの互換性を確認するようにしてください。 この実験的な技術の文法と動作は、将来のブラウザのバージョン変更に伴う仕様変更によって、変更されるかもしれないことにも注意してください。

概要

Selectionは、window.getSelection()や、 その他のメソッドによって返されるオブジェクトのクラスです。 ユーザーが静的なテキストと、ページのその他の部分をドラッグした場合、 Selectionはページの広域の選択箇所と、もしかすると複数の連なる要素を表す内容になるかもしれません。 テキスト選択の詳細については、個別のテキスト編集要素であるInput、TextArea、 document.activeElementを参照してください。 document.activeElementは通常、window.getSelection()から返される親オブジェクトを返します。(翻訳に自身無し)

Selectionオブジェクトは、ユーザーが選択した範囲を表します。 通常は、下記のような単一の範囲のみを保持します。 

var selObj = window.getSelection();
var range  = selObj.getRangeAt(0);
  • selObjは、Selectionオブジェクトです。
  • rangeは、Rangeオブジェクトです。

SelectionのtoString()メソッドを呼び出すと、 選択に含まれるテキストを返します。 

var selObj = window.getSelection();
window.alert(selObj);

Selectionオブジェクトをwindow.alertの引数にして呼び出すと、 そのオブジェクトのtoString()メソッドが呼び出されることに注意してください。

用語

上記で説明した以外にも、重要な用語が存在します。

アンカー(anchor)
Selectionのアンカーとは、選択の開始点の事です。 マウスを使ってSelection(選択)を作成した場合、アンカーはDocument内でマウスボタンが最初に押された場所になります。 ユーザーがマウスまたはキーボードを使用してSelection(選択)を変更したとしても、アンカーは移動しません。
フォーカス(focus)
Selectionのフォーカスとは、選択の終了点の事です。 マウスを使ってSelection(選択)を作成した場合、フォーカスはDocument内でマウスボタンが離された場所になります。 ユーザーがマウスまたはキーボードを使用してSelection(選択)を変更すると、フォーカスはその移動する選択の終了点になります。
レンジ(range)
レンジはDocumentの一部の連なりの事です。 レンジはtextノードの一部のようにノードのある部分だけでは無く、ノード全体を含むことも可能です。 ユーザが通常、一度に選択するのは単一のレンジのみですが、 複数のレンジを選択することも事も可能です。(例: Ctrlキーを使用することで) レンジは、RangeオブジェクトとしてSelectionから取得することが出来ます。 RangeオブジェクトはDOMを通しての作成、またSelectionからプログラム的に追加、削除をすることが可能です。

プロパティ・メソッド

  • プロパティ

  • .anchorNode

    セレクション開始位置のノードを返します。

  • .anchorOffset

    anchorNode内でのアンカーがオフセットされている文字数を返します。

  • .focusNode

    セレクション終了位置のノードを返します。

  • .focusOffset

    focusNode内でのフォーカスがオフセットされている文字数を返します。

  • .isCollapsed

    セレクションの開始と終了が同じ位置か否かを示す真偽値を返します。

  • .rangeCount

    セレクション内のレンジの数を返します。

  • メソッド

  • .addRange()

    SelectionへRangeを追加します。

  • .collapse()

    1点へ現在の選択を折りたたみます。

  • .collapseToEnd()

    最後のレンジの終端にセレクションを折りたたみます。

  • .collapseToStart()

    最初のレンジの始端にセレクションを折りたたみます。

  • .containsNode()

    指定したノードがセレクションの一部であれるかを指し示します。

  • .deleteFromDocument()

    ドキュメントのDOMから、セレクションオブジェクトによって表される実際のテキスト箇所を削除します。

  • .extend()

    セレクションのフォーカス(選択の終了点)を、指定した位置に移動します。

  • .getRangeAt()

    現在選択されている範囲(の中の1つ)を表すRangeオブジェクトを返します。

  • .modify()

    シンプルなテキスト式のコマンドを使用して、現在のセレクションまたはカーソル位置の変更を適用します。

  • .removeAllRanges()

    セレクションから全てのレンジを削除し、anchorNodeとfocusNodeのプロパティをnullにし、選択を無くします。

  • .removeRange()

    セレクションからレンジを削除します。

  • .selectAllChildren()

    指定したノードの全ての子を、セレクションへ追加します。

  • .selectionLanguageChange()

    キーボード方向の変化後に、カーソルのBidi(双方向)レベルを変更します。(翻訳に自信なし)

  • .toString()

    セレクションオブジェクトによって表される文字列、すなわち現在選択されているテキストを返します。

関連項目

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。