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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 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 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox 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 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
Range() constructor
実験的
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 24IE 未対応 なしOpera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 24Opera Android 完全対応 15Safari iOS 完全対応 ありSamsung Internet Android ?
cloneContentsChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
cloneRangeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
collapseChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
collapsedChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
commonAncestorContainerChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
compareBoundaryPointsChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
compareNode
実験的非推奨非標準
Chrome 未対応 なしEdge ? Firefox 未対応 1 — 3IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
comparePoint
実験的
Chrome 完全対応 ありEdge ? Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 15Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 15Safari iOS ? Samsung Internet Android ?
createContextualFragment
実験的
Chrome 完全対応 ありEdge ? Firefox 完全対応 ありIE 完全対応 11Opera 完全対応 15Safari 完全対応 9WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android 完全対応 15Safari iOS ? Samsung Internet Android ?
deleteContentsChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
detachChrome 完全対応 あり
補足
完全対応 あり
補足
補足 Since April 2014 this method is a no-op in Chrome.
Edge 完全対応 ありFirefox 未対応 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 完全対応 ありEdge Mobile 完全対応 あり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 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
endOffsetChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
extractContentsChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
getBoundingClientRect
実験的
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 15Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 15Safari iOS ? Samsung Internet Android ?
getClientRects
実験的
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 15Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 15Safari iOS ? Samsung Internet Android ?
insertNodeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 2IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 9Safari iOS 完全対応 ありSamsung Internet Android ?
intersectsNode
実験的
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 17IE 未対応 なしOpera 完全対応 15Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 19Opera Android 完全対応 15Safari iOS ? Samsung Internet Android ?
isPointInRange
実験的
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 未対応 なしOpera 完全対応 15Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 15Safari iOS ? Samsung Internet Android ?
selectNodeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
selectNodeContentsChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
setEndChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
setEndAfterChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
setEndBeforeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
setStartChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
setStartAfterChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
setStartBeforeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
startContainerChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
startOffsetChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
surroundContentsChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
toStringChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

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

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: yyss, jsx, AshfaqHossain, ethertank, Luna8bit, Mgjbot
最終更新者: yyss,