Range

Range インターフェイスとは document の断片で、ある document 中のノードやテキストノードの一部を含むことのできるものです。

range は document オブジェクトの createRange() メソッドにより生成することができます。また、Selection オブジェクトの getRangeAt() メソッドや Document オブジェクトの caretRangeFromPoint() メソッドにより取得することもできます。

さらに、Range() コンストラクターも使用できます。

プロパティ

継承しているプロパティはありません。

range.collapsed 読取専用
range の始点と終点が同じ位置にあるか否かを示す Boolean を返す
range.commonAncestorContainer 読取専用
startContainerendContainer をともに含む、最も深い Node を返す
range.endContainer 読取専用
Range の終点を含む Node を返す
range.endOffset 読取専用
endContainer の中での Range の終点の位置を示す数字を返す
range.startContainer 読取専用
Range の始点を含む Node を返す
range.startOffset 読取専用
startContainer の中での Range の始点の位置を示す数字を返す

コンストラクター

Range()
始点および終点がグローバルな Document である Range オブジェクトを返します。

メソッド

継承しているメソッドはありません。

range.setStart()
Range の始点を設定
range.setEnd()
Range の終点を設定
range.setStartBefore()
他の Node を基準に Range の始点を設定
range.setStartAfter()
他の Node を基準に Range の始点を設定
range.setEndBefore()
他の Node を基準に Range の終点を設定
range.setEndAfter()
他の Node を基準に Range の終点を設定
range.selectNode()
Range を、ある Node とその内容を含むように設定
range.selectNodeContents()
Range を、ある Node の内容を含むように設定
range.collapse()
Range をその端点の一方へ折りたたむ
range.cloneContents()
Range の中身をコピーした DocumentFragment を返す
range.deleteContents()
Range の中身を Document から削除
range.extractContents()
Range の中身をドキュメントツリーから DocumentFragment に移動
range.insertNode()
Range の始点に Node を挿入
range.surroundContents()
Range の中身を新しい Node の中に移動
range.compareBoundaryPoints()
2 つの Range の端点の位置を比較
range.cloneRange()
元の Range と同じ端点を持つ Range オブジェクトを返す
range.detach()
パフォーマンスを改善するために、 Range を使用状態から開放
range.toString()
Range の内容を文字列として返す
range.compareNode()
Node が range の前、後、中、外のうちのいずれの場所にあるかを示す定数を返す
range.comparePoint()
指定された点が Range の前、中、後のうちのいずれの場所にあるかを -1、0、1 で示す
range.createContextualFragment()
渡された文字列から生成した DocumentFragment を返す
Range.getBoundingClientRect()
Range の内容の全体に結びつく DOMRect オブジェクトを返します。これは、range.getClientRects() が返すすべての長方形の集合体です。
Range.getClientRects()
Range 内のすべての要素について、Element.getClientRects() の結果をまとめた DOMRect オブジェクトのリストを返します。
range.intersectsNode()
指定ノードの範囲が Range と交差するか否かを示す boolean を返す
range.isPointInRange()
与えられた点が Range の中にあるか否かを示す boolean を返す

仕様

仕様書 策定状況 コメント
DOM
Range の定義
現行の標準 今後は RangeException は使用せず、代わりに DOMException を使用します。
collapse() の第 2 引数を省略可能に変更。
isPointInRange()comparePoint()intersectsNode() メソッドを追加。
Range() コンストラクターを追加。
DOM Parsing and Serialization
Extensions to Range の定義
草案 createContextualFragment() メソッドを追加。
CSS Object Model (CSSOM) View Module
Extensions to Range の定義
草案 getClientRects() および getBoundingClientRect() メソッドを追加。
Document Object Model (DOM) Level 2 Traversal and Range Specification
Range の定義
廃止された 初期定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
RangeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4
補足
完全対応 4
補足
補足 Starting with Firefox 13, the Range object throws a DOMException as defined in DOM 4, instead of a RangeException defined in prior specifications.
IE 完全対応 9Opera 完全対応 9Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 Starting with Firefox 13, the Range object throws a DOMException as defined in DOM 4, instead of a RangeException defined in prior specifications.
Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Range() constructor
実験的
Chrome 完全対応 ありEdge 完全対応 ≤18Firefox 完全対応 24IE 未対応 なしOpera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 24Opera Android 完全対応 14Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
cloneContentsChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
cloneRangeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
collapseChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
collapsedChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
commonAncestorContainerChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
compareBoundaryPointsChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
compareNode
実験的非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
comparePoint
実験的
Chrome 完全対応 ありEdge 完全対応 17Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 14Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
createContextualFragment
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 11Opera 完全対応 15Safari 完全対応 9WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 14Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
deleteContentsChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
detachChrome 完全対応 あり
補足
完全対応 あり
補足
補足 Since April 2014 this method is a no-op in Chrome.
Edge 完全対応 12Firefox 未対応 4 — 15
補足
未対応 4 — 15
補足
補足 Starting in Firefox 15.0, this method is a no-op and has no effect.
IE 完全対応 9Opera 完全対応 9Safari 完全対応 あり
補足
完全対応 あり
補足
補足 Since August 2015 this method is a no-op in WebKit-based browsers.
WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 4 — 15
補足
未対応 4 — 15
補足
補足 Starting in Firefox 15.0, this method is a no-op and has no effect.
Opera Android 完全対応 ありSafari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 Since August 2015 this method is a no-op in WebKit-based browsers.
Samsung Internet Android 完全対応 あり
endContainerChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
endOffsetChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
extractContentsChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
getBoundingClientRect
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
getClientRects
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 15Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
insertNodeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
intersectsNode
実験的
Chrome 完全対応 ありEdge 完全対応 17Firefox 完全対応 17IE 未対応 なしOpera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 19Opera Android 完全対応 14Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
isPointInRange
実験的
Chrome 完全対応 ありEdge 完全対応 15Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 14Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
selectNodeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
selectNodeContentsChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
setEndChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
setEndAfterChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
setEndBeforeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
setStartChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
setStartAfterChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
setStartBeforeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
startContainerChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
startOffsetChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
surroundContentsChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
toStringChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報