Range - 範囲

概要

名前

Range

IDL

[Constructor,
 Exposed=Window]
interface Range {
  readonly attribute Node startContainer;
  readonly attribute unsigned long startOffset;
  readonly attribute Node endContainer;
  readonly attribute unsigned long endOffset;
  readonly attribute boolean collapsed;
  readonly attribute Node commonAncestorContainer;

  void setStart(Node node, unsigned long offset);
  void setEnd(Node node, unsigned long offset);
  void setStartBefore(Node node);
  void setStartAfter(Node node);
  void setEndBefore(Node node);
  void setEndAfter(Node node);
  void collapse(optional boolean toStart = false);
  void selectNode(Node node);
  void selectNodeContents(Node node);

  const unsigned short START_TO_START = 0;
  const unsigned short START_TO_END = 1;
  const unsigned short END_TO_END = 2;
  const unsigned short END_TO_START = 3;
  short compareBoundaryPoints(unsigned short how, Range sourceRange);

  [CEReactions] void deleteContents();
  [CEReactions, NewObject] DocumentFragment extractContents();
  [CEReactions, NewObject] DocumentFragment cloneContents();
  [CEReactions] void insertNode(Node node);
  [CEReactions] void surroundContents(Node newParent);

  [NewObject] Range cloneRange();
  void detach();

  boolean isPointInRange(Node node, unsigned long offset);
  short comparePoint(Node node, unsigned long offset);

  boolean intersectsNode(Node node);

  stringifier;
};

// CSSOM View Module
partial interface Range {
  DOMRectList getClientRects();
  [NewObject] DOMRect getBoundingClientRect();
};

仕様書

https://dom.spec.whatwg.org/#range

https://drafts.csswg.org/cssom-view/#extensions-to-the-range-interface (CSSOM View Module)

チュートリアル

Rangeは、コンストラクタやDocument.createRange()で作成できます。

new Range() ;
document.createRange() ;

コンストラクタ

Range()

新しいRangeのオブジェクトを作成します。

プロパティ

collapsed

範囲が折り畳まれているか否かを返します。

commonAncestorContainer

始点と終点を共通して含む、最も近い祖先ノードを返します。

endContainer

終点を含むノードを返します。

endOffset

終点の位置を返します。

startContainer

始点を含むノードを返します。

startOffset

始点の位置を返します。

メソッド

cloneContents()

範囲のコンテンツを複製して、それを子ノードに持つDocumentFragmentを返します。

cloneRange()

Rangeを複製します。

collapse()

範囲を折り畳み、始点と終点の位置を同じにします。

compareBoundaryPoints()

2つのRangeの位置関係を比較します。

comparePoint()

ポイントと範囲の位置関係を比較します。

deleteContents()

範囲のコンテンツを削除します。

detach()

2017年現在は、互換性の維持のために残されており、実行しても何も行なわないようになっています。

extractContents()

範囲のコンテンツを切り取って、それを子ノードに持つDocumentFragmentを返します。

getBoundingClientRect()

範囲全体を最小限で取り囲む矩形を取得します。

getClientRects()

範囲を取り囲む全種類の矩形を取得します。

insertNode()

範囲の始点にノードを挿入します。

intersectsNode()

ノードと範囲が交差しているか否かを確認します。

isPointInRange()

ポイントが、範囲に含まれているか否かを確認します。

selectNode()

ノードの直前に始点を、直後に終点を設定します。

selectNodeContents()

ノードの先頭に始点を、末尾に終点を設定します。

setEnd()

終点を位置で設定します。

setEndAfter()

終点を、ノードの直後に設定します。

setEndBefore()

終点を、ノードの直前に設定します。

setStart()

始点を位置で設定します。

setStartAfter()

始点を、ノードの直後に設定します。

setStartBefore()

始点を、ノードの直前に設定します。

surroundContents()

範囲のコンテンツの周りをノードで囲みます。

定数

END_TO_END

2を返します。この値は、比較方法が終点と終点であることを表します。

END_TO_START

3を返します。この値は、比較方法が終点と始点であることを表します。

START_TO_END

1を返します。この値は、比較方法が始点と終点であることを表します。

START_TO_START

0を返します。この値は、比較方法が始点と始点であることを表します。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

関連記事

Selection.containsNode()

containsNode()は、Selectionのメソッドです。選択範囲があるノードを含んでいるか否かを確認します。

Selection.setPosition()

setPosition()は、Selectionのメソッドです。選択範囲の始点と終点をある位置にセットします。このメソッドはcollapse()のエイリアスです。

Selection.selectAllChildren()

selectAllChildren()は、Selectionのメソッドです。あるノードの内側を選択範囲にセットします。

Range.surroundContents()

surroundContents()は、Rangeのメソッドです。範囲のコンテンツの周りをノードで囲みます。