Selection - 選択範囲
Selectionは、ユーザーが選択した範囲の情報を管理するための機能を備えたインターフェイスです。
概要
- 名前
- Selection
- IDL
interface Selection { readonly attribute Node? anchorNode; readonly attribute unsigned long anchorOffset; readonly attribute Node? focusNode; readonly attribute unsigned long focusOffset; readonly attribute boolean isCollapsed; readonly attribute unsigned long rangeCount; readonly attribute DOMString type; Range getRangeAt(unsigned long index); void addRange(Range range); void removeRange(Range range); void removeAllRanges(); void empty(); void collapse(Node? node, optional unsigned long offset = 0); void setPosition(Node? node, optional unsigned long offset = 0); void collapseToStart(); void collapseToEnd(); void extend(Node node, optional unsigned long offset = 0); void setBaseAndExtent(Node anchorNode, unsigned long anchorOffset, Node focusNode, unsigned long focusOffset); void selectAllChildren(Node node); [CEReactions] void deleteFromDocument(); boolean containsNode(Node node, optional boolean allowPartialContainment = false); stringifier DOMString (); };
- 仕様書
- http://w3c.github.io/selection-api/#selection-interface
チュートリアル
Selectionは、Window.getSelection()、またはDocument.getSelection()で取得できます。
getSelection() ;
document.getSelection() ;
コンストラクタ
コンストラクタはありません。
プロパティ
anchorNode
選択範囲の始点を含むノードを返します。
anchorOffset
選択範囲の始点の位置を返します。
focusNode
選択範囲の終点を含むノードを返します。
focusOffset
選択範囲の終点の位置を返します。
isCollapsed
選択範囲が折り畳まれているか否かを返します。
rangeCount
Selectionに含まれるRangeの数を返します。これは選択範囲の数を表します。
type
選択範囲の種類を文字列で返します。
メソッド
addRange()
Rangeを指定して選択範囲をセットします。
collapse()
選択範囲をある位置に折り畳みます。
collapseToEnd()
選択範囲を終点に折り畳みます。
collapseToStart()
選択範囲を始点に折り畳みます。
containsNode()
選択範囲があるノードを含んでいるか否かを確認します。
deleteFromDocument()
選択範囲のコンテンツを削除します。
empty()
全ての選択範囲を解除します。このメソッドは、removeAllRanges()のエイリアスです。
extend()
終点をある位置にセットして、選択範囲を拡張します。
getRangeAt()
インデックス番号を指定して、選択範囲を表すRangeを取得します。
removeAllRanges()
全ての選択範囲を解除します。
removeRange()
1つの選択範囲を解除します。
selectAllChildren()
あるノードの内側を選択範囲にセットします。
setBaseAndExtent()
始点と終点を指定して、選択範囲をセットします。
setPosition()
選択範囲の始点と終点をある位置にセットします。このメソッドはcollapse()のエイリアスです。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
Selection | ● | ● | ● | ● | ● | ● | ● | ● |
addRange() | ● | ● | ● | ● | ● | ● | ● | ● |
anchorNode | ● | ● | ● | ● | ● | ● | ● | ● |
anchorOffset | ● | ● | ● | ● | ● | ● | ● | ● |
collapse() | ● | ● | ● | ● | ● | ● | ● | ● |
collapseToEnd() | ● | ● | ● | ● | ● | ● | ● | ● |
collapseToStart() | ● | ● | ● | ● | ● | ● | ● | ● |
containsNode() | ● | ● | ● | ● | 確認中 | ● | ● | ● |
deleteFromDocument() | ● | ● | ● | ● | ● | ● | ● | ● |
empty() | ● | ● 55+ | ● | ● | × | ● 15+ | ● | ● |
extend() | ● | ● | ● | ● | 確認中 | ● | ● | ● |
focusNode | ● | ● | ● | ● | ● | ● | ● | ● |
focusOffset | ● | ● | ● | ● | ● | ● | ● | ● |
getRangeAt() | ● | ● | ● | ● | ● | ● | ● | ● |
isCollapsed | ● | ● | ● | ● | ● | ● | ● | ● |
rangeCount | ● | ● | ● | ● | ● | ● | ● | ● |
removeAllRanges() | ● | ● | ● | ● | ● | ● | ● | ● |
removeRange() | ● 58+ | ● | × | ● | ● | ● 45+ | × | × |
selectAllChildren() | ● | ● | ● | ● | ● | ● | ● | ● |
setBaseAndExtent() | ● | ● 53+ | ● | ● | 確認中 | ● 15+ | ● | ● |
setPosition() | ● | ● 55+ | ● | ● | × | ● 15+ | ● | ● |
type | ● | × | ● | ● | 確認中 | ● 15+ | ● | ● |
関連記事
- Selection.removeAllRanges()
- removeAllRanges()は、Selectionのメソッドです。全ての選択範囲を解除します。
- Selection.setBaseAndExtent()
- setBaseAndExtent()は、Selectionのメソッドです。始点と終点を指定して、選択範囲をセットします。
- Selection.containsNode()
- containsNode()は、Selectionのメソッドです。選択範囲があるノードを含んでいるか否かを確認します。
- Selection.selectAllChildren()
- selectAllChildren()は、Selectionのメソッドです。あるノードの内側を選択範囲にセットします。