Range
{{APIRef("DOM")}}
The Range interface represents a fragment of a document that can contain nodes and parts of text nodes.
A range can be created by using the {{ domxref("Document.createRange()") }} method. Range objects can also be retrieved by using the {{ domxref("Selection/getRangeAt", "getRangeAt()") }} method of the {{ domxref("Selection") }} object or the {{domxref("Document/caretRangeFromPoint", "caretRangeFromPoint()")}} method of the {{domxref("Document")}} object.
There also is the {{domxref("Range.Range()", "Range()")}} constructor available.
{{InheritanceDiagram}}
Instance properties
There are no inherited properties.
{{domxref("Range.collapsed")}}{{ReadOnlyInline}}- : Returns a boolean value indicating whether the range’s start and end points are at the same position.
{{domxref("Range.commonAncestorContainer")}}{{ReadOnlyInline}}- : Returns the deepest
{{ domxref("Node") }}that contains thestartContainerandendContainernodes.
- : Returns the deepest
{{domxref("Range.endContainer")}}{{ReadOnlyInline}}- : Returns the
{{ domxref("Node") }}within which theRangeends.
- : Returns the
{{domxref("Range.endOffset")}}{{ReadOnlyInline}}- : Returns a number representing where in the
endContainertheRangeends.
- : Returns a number representing where in the
{{domxref("Range.startContainer")}}{{ReadOnlyInline}}- : Returns the
{{ domxref("Node") }}within which theRangestarts.
- : Returns the
{{domxref("Range.startOffset")}}{{ReadOnlyInline}}- : Returns a number representing where in the
startContainertheRangestarts.
- : Returns a number representing where in the
Constructor
{{ domxref("Range.Range()", "Range()") }}- : Returns a
Rangeobject with the global{{domxref("Document")}}as its start and end.
- : Returns a
Instance methods
There are no inherited methods.
{{ domxref("Range.collapse()")}}- : Collapses the
Rangeto one of its boundary points.
- : Collapses the
{{ domxref("Range.compareBoundaryPoints()")}}- : Compares the boundary points of the
Rangewith anotherRange.
- : Compares the boundary points of the
{{ domxref("Range.compareNode()")}}{{Deprecated_Inline}}{{Non-standard_Inline}}- : Returns a constant representing whether the
{{domxref("Node")}}is before, after, inside, or surrounding the range.
- : Returns a constant representing whether the
{{ domxref("Range.comparePoint()")}}- : Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the
Range.
- : Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the
{{ domxref("Range.cloneContents()")}}- : Returns a
{{ domxref("DocumentFragment") }}copying the nodes of aRange.
- : Returns a
{{ domxref("Range.cloneRange()")}}- : Returns a
Rangeobject with boundary points identical to the clonedRange.
- : Returns a
{{ domxref("Range.createContextualFragment()")}}- : Returns a
{{ domxref("DocumentFragment") }}created from a given string of code.
- : Returns a
{{ domxref("Range.deleteContents()")}}- : Removes the contents of a
Rangefrom the{{ domxref("Document") }}.
- : Removes the contents of a
{{ domxref("Range.detach()")}}- : Does nothing. Kept for compatibility.
{{ domxref("Range.extractContents()")}}- : Moves contents of a
Rangefrom the document tree into a{{ domxref("DocumentFragment") }}.
- : Moves contents of a
{{ domxref("Range.getBoundingClientRect()") }}- : Returns a
{{ domxref("DOMRect") }}object which bounds the entire contents of theRange; this would be the union of all the rectangles returned by{{ domxref("range.getClientRects()") }}.
- : Returns a
{{ domxref("Range.getClientRects()") }}- : Returns a list of
{{ domxref("DOMRect") }}objects that aggregates the results of{{ domxref("Element.getClientRects()") }}for all the elements in theRange.
- : Returns a list of
{{ domxref("Range.isPointInRange()")}}- : Returns a
booleanindicating whether the given point is in theRange.
- : Returns a
{{ domxref("Range.insertNode()")}}- : Insert a
{{ domxref("Node") }}at the start of aRange.
- : Insert a
{{ domxref("Range.intersectsNode()")}}- : Returns a
booleanindicating whether the given node intersects theRange.
- : Returns a
{{ domxref("Range.selectNode()")}}- : Sets the
Rangeto contain the{{ domxref("Node") }}and its contents.
- : Sets the
{{ domxref("Range.selectNodeContents()")}}- : Sets the
Rangeto contain the contents of a{{ domxref("Node") }}.
- : Sets the
{{ domxref("Range.setEnd()")}}- : Sets the end position of a
Range.
- : Sets the end position of a
{{ domxref("Range.setStart()")}}- : Sets the start position of a
Range.
- : Sets the start position of a
{{ domxref("Range.setEndAfter()")}}- : Sets the end position of a
Rangerelative to another{{ domxref("Node") }}.
- : Sets the end position of a
{{ domxref("Range.setEndBefore()")}}- : Sets the end position of a
Rangerelative to another{{ domxref("Node") }}.
- : Sets the end position of a
{{ domxref("Range.setStartAfter()")}}- : Sets the start position of a
Rangerelative to another{{ domxref("Node") }}.
- : Sets the start position of a
{{ domxref("Range.setStartBefore()")}}- : Sets the start position of a
Rangerelative to another{{ domxref("Node") }}.
- : Sets the start position of a
{{ domxref("Range.surroundContents()")}}- : Moves content of a
Rangeinto a new{{ domxref("Node") }}.
- : Moves content of a
{{ domxref("Range.toString()")}}- : Returns the text of the
Range.
- : Returns the text of the
Specifications
{{Specifications}}
Browser compatibility
{{Compat}}