Range - Web APIs

Range 介面代表一個文件的片段（fragment），可以包含節點及部分的文字節點。

A range can be created using the createRange() method of the Document object. Range objects can also be retrieved by using the getRangeAt() method of the Selection object or the caretRangeFromPoint() method of the Document object.

There also is the Range() constructor available.

屬性

There are no inherited properties.

Range.collapsed Read only: Returns a Boolean indicating whether the range's start and end points are at the same position.
Range.commonAncestorContainer Read only: Returns the deepest Node that contains the startContainer and endContainer nodes.
Range.endContainer Read only: Returns the Node within which the Range ends.
Range.endOffset Read only: Returns a number representing where in the endContainer the Range ends.
Range.startContainer Read only: Returns the Node within which the Range starts.
Range.startOffset Read only: Returns a number representing where in the startContainer the Range starts.

建構式

Range(): Returns a Range object with the global Document as its start and end.

方法

There are no inherited methods.

Range.setStart(): Sets the start position of a Range.
Range.setEnd(): Sets the end position of a Range.
Range.setStartBefore(): Sets the start position of a Range relative to another Node.
Range.setStartAfter(): Sets the start position of a Range relative to another Node.
Range.setEndBefore(): Sets the end position of a Range relative to another Node.
Range.setEndAfter(): Sets the end position of a Range relative to another Node.
Range.selectNode(): Sets the Range to contain the Node and its contents.
Range.selectNodeContents(): Sets the Range to contain the contents of a Node.
Range.collapse(): Collapses the Range to one of its boundary points.
Range.cloneContents(): Returns a DocumentFragment copying the nodes of a Range.
Range.deleteContents(): Removes the contents of a Range from the Document.
Range.extractContents(): Moves contents of a Range from the document tree into a DocumentFragment.
Range.insertNode(): Insert a Node at the start of a Range.
Range.surroundContents(): Moves content of a Range into a new Node.
Range.compareBoundaryPoints(): Compares the boundary points of the Range with another Range.
Range.cloneRange(): Returns a Range object with boundary points identical to the cloned Range.
Range.detach(): Releases the Range from use to improve performance.
Range.toString(): Returns the text of the Range.
Range.compareNode(): Returns a constant representing whether the Node is before, after, inside, or surrounding the range.
Range.comparePoint(): Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the Range.
Range.createContextualFragment(): Returns a DocumentFragment created from a given string of code.
Range.getBoundingClientRect(): Returns a DOMRect object which bounds the entire contents of the Range; this would be the union of all the rectangles returned by range.getClientRects().
Range.getClientRects(): Returns a list of DOMRect objects that aggregates the results of Element.getClientRects() for all the elements in the Range.
Range.intersectsNode(): Returns a boolean indicating whether the given node intersects the Range.
Range.isPointInRange(): Returns a boolean indicating whether the given point is in the Range.

規範

Specification	Status	Comment
DOM The definition of 'Range' in that specification.	Living Standard	Do not use `RangeException` anymore, use `DOMException` instead. Made the second parameter of `collapse()` optional. Added the methods `isPointInRange()`, `comparePoint()`, and `intersectsNode()`. Added the constructor `Range()`.
DOM Parsing and Serialization The definition of 'Extensions to Range' in that specification.	Working Draft	Added the method `createContextualFragment()`.
CSS Object Model (CSSOM) View Module The definition of 'Extensions to Range' in that specification.	Working Draft	Added the methods `getClientRects()` and `getBoundingClientRect()`.
Document Object Model (DOM) Level 2 Traversal and Range Specification The definition of 'Range' in that specification.	Obsolete	Initial specification.

瀏覽器相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	1.0 (1.7 or earlier) [1]	9.0	9.0	(Yes)
`Range()` constructor	(Yes)	?	24.0 (24.0)	No support	15.0	(Yes)
`compareNode()`	No support	?	1.0 (1.7 or earlier) Removed in 3.0 (1.9)	No support	No support	No support
`isPointInRange()`, and `comparePoint()`	(Yes)	?	(Yes)	No support	15.0	?
`intersectsNode()`	(Yes)	?	17.0 (17.0) [2]	No support	15.0	?
`getClientRects()` and `getBoundingClientRect()`	(Yes)	(Yes)	4.0 (2.0)	9	15.0	5
`createContextualFragment()`	(Yes)	?	(Yes)	11	15.0	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	1.0 (1.0) [1]	9.0	9.0	(Yes)

[1] Starting with Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) the Range object throws a DOMException as defined in DOM 4, instead of a RangeException defined in prior specifications.

[2] Gecko supported it up to Gecko 1.9, then removed it until Gecko 17 where it was reimplemented, matching the spec.

參見

The DOM interfaces index