Class Range

Namespace

CSharpToJavaScript.APIs.JS

Assembly

CSharpToJavaScript.dll

The Range interface represents a fragment of a document that can contain nodes and parts of text nodes.

[Value("Range")]
public class Range : AbstractRange

Inheritance

object

AbstractRange

Range

Inherited Members

AbstractRange.StartContainer

AbstractRange.StartOffset

AbstractRange.EndContainer

AbstractRange.EndOffset

AbstractRange.Collapsed

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

A range can be created by using the CreateRange() method. Range objects can also be retrieved by using the SelectiongetRangeAt method of the Selection object or the DocumentcaretRangeFromPoint method of the Document object.

There also is the Range() constructor available.

-The DOM interfaces index

See also on MDN

Constructors

Range()

The Range() constructor returns a newly created
Range object whose start and end is the global Document
object.

public Range()

Remarks

-The DOM interfaces index
-CreateRange()
-CSS custom highlight API module

See also on MDN

Fields

END_TO_END

[Value("END_TO_END")]
public const ushort END_TO_END = 2

Field Value

ushort

END_TO_START

[Value("END_TO_START")]
public const ushort END_TO_START = 3

Field Value

ushort

START_TO_END

[Value("START_TO_END")]
public const ushort START_TO_END = 1

Field Value

ushort

START_TO_START

[Value("START_TO_START")]
public const ushort START_TO_START = 0

Field Value

ushort

Properties

CommonAncestorContainer

The Range.commonAncestorContainer read-only property
returns the deepest — or furthest down the document tree — Node that
contains both boundary points of the Range. This means that if
Range.StartContainer and Range.EndContainer both refer to
the same node, this node is the common ancestor container.

[Value("commonAncestorContainer")]
public Node CommonAncestorContainer { get; }

Property Value

Node

A Node object.

Remarks

Since a Range need not be continuous, and may also partially select nodes,
this is a convenient way to find a Node which encloses a
Range.

This property is read-only. To change the ancestor container of a Node,
consider using the various methods available to set the start and end positions of the
Range, such as SetStart(Node, ulong) and
SetEnd(Node, ulong).

-The DOM interfaces index

See also on MDN

Methods

CloneContents()

The cloneContents() method of the Range interface copies the selected Node children of the range's RangecommonAncestorContainer and puts them in a new DocumentFragment object.

[Value("cloneContents")]
public DocumentFragment CloneContents()

Returns

DocumentFragment

A DocumentFragment object.

Remarks

Nodes are cloned using the same algorithm as CloneNode(bool), which means event listeners attached with scripts are not cloned. HTML id attributes are cloned, which can lead to an invalid document through cloning.

The first and last selected children of commonAncestorContainer may be partially selected. In this case, the child node itself is cloned, but its content is only the part that is selected, by recursively cloning the range between the original range's start/end boundary and that child node's end/start boundary.

-The DOM interfaces index

See also on MDN

CloneRange()

The Range.cloneRange() method returns a
Range object with boundary points identical to the cloned
Range.

[Value("cloneRange")]
public Range CloneRange()

Returns

Range

A Range object.

Remarks

The returned clone is copied by value, not reference, so a change in either
Range does not affect the other.

-The DOM interfaces index

See also on MDN

Collapse(bool)

The collapse() method of the Range interface collapses the
Range to one of its boundary points.

[Value("collapse")]
public GlobalObject.Undefined Collapse(bool toStart = false)

Parameters

toStart bool

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

A collapsed Range is empty, containing no content, specifying a
single-point in a DOM tree. To determine if a Range is already collapsed,
see the Range.Collapsed property.

-The DOM interfaces index

See also on MDN

CompareBoundaryPoints(ushort, Range)

The compareBoundaryPoints() method of the Range interface compares the boundary points of the Range with those of another range.

[Value("compareBoundaryPoints")]
public Number CompareBoundaryPoints(ushort how, Range sourceRange)

Parameters

how ushort

sourceRange Range

Returns

Number

A number.This API is consistent with the general convention that, when comparing A to B, a negative number means A comes before B and vice versa (see for example ArrayPrototypeSort). The ranges are compared in the direction of this to other, the same as StringPrototypeLocaleCompare. However, the boundary points are specified in the reverse order for the how parameter: END_TO_START compares the start of this to the end of other.

Remarks

-The DOM interfaces index

See also on MDN

ComparePoint(Node, ulong)

The comparePoint() method of the Range interface determines whether a specified point is before, within, or after the Range. The point is specified by a reference node and an offset within that node.

[Value("comparePoint")]
public Number ComparePoint(Node node, ulong offset)

Parameters

node Node

offset ulong

Returns

Number

A number.

Remarks

-The DOM interfaces index

See also on MDN

CreateContextualFragment(Union92)

The Range.createContextualFragment() method returns a
DocumentFragment by invoking the HTML fragment parsing algorithm or the
XML fragment parsing algorithm with the start of the range (the parent of the
selected node) as the context node. The HTML fragment parsing algorithm is used if the
range belongs to a Document whose HTMLness bit is set. In the HTML case, if
the context node would be html, for historical reasons the fragment parsing
algorithm is invoked with body as the context instead.

[Value("createContextualFragment")]
public DocumentFragment CreateContextualFragment(Union92 string_)

Parameters

string_ Union92

Returns

DocumentFragment

A DocumentFragment object.

Remarks

-The DOM interfaces index

See also on MDN

DeleteContents()

The Range.deleteContents() method removes all completely-selected {{ domxref("Node", "nodes", "", "nocode") }} within this range from the document. For the partially selected nodes at the start or end of the range, only the selected portion of the text is deleted, while the node itself remains intact. Afterwards, the range is collapsed to the end of the last selected node.

[Value("deleteContents")]
public GlobalObject.Undefined DeleteContents()

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

Unlike ExtractContents(), this method does not return a DocumentFragment containing the deleted content.

-The DOM interfaces index

See also on MDN

Detach()

The Range.detach() method does nothing. It used to
disable the Range object and enable the browser to release associated
resources. The method has been kept for compatibility.

[Value("detach")]
public GlobalObject.Undefined Detach()

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-The DOM interfaces index

See also on MDN

ExtractContents()

The extractContents() method of the Range interface is similar to a combination of CloneContents() and DeleteContents(). It removes the child Nodes of the range from the document, clones them, and returns them as a new DocumentFragment object. For partially selected nodes, only the selected text is deleted, but all containing parent nodes up to the common ancestor are cloned as well, resulting in two copies of these nodes, one in the original document and one in the extracted fragment.

[Value("extractContents")]
public DocumentFragment ExtractContents()

Returns

DocumentFragment

A DocumentFragment object.

Remarks

-The DOM interfaces index

See also on MDN

GetBoundingClientRect()

The Range.getBoundingClientRect() method returns a DOMRect object that bounds the contents of the range; this is a rectangle
enclosing the union of the bounding rectangles for all the elements in the range.

[Value("getBoundingClientRect")]
public DOMRect GetBoundingClientRect()

Returns

DOMRect

A DOMRect object that encloses the union of the bounding rectangles for all elements in the range.

Remarks

This method is useful for determining the viewport coordinates of the cursor or
selection inside a text box. See GetBoundingClientRect() for
details on the returned value.

-GetClientRects() - finer-grained result for non-rectangular
ranges (e.g., when the selection wraps onto the next line);
-GetBoundingClientRect()
-CaretPositionFromPoint(Number, Number, CaretPositionFromPointOptions) - to get the (node, offset) from
viewport coordinates.

See also on MDN

GetClientRects()

The Range.getClientRects() method returns a list of DOMRect objects representing the area of the screen occupied by the range. This is created by aggregating the results of calls to
GetClientRects() for all the elements in the range.

[Value("getClientRects")]
public DOMRectList GetClientRects()

Returns

DOMRectList

An iterable sequence of DOMRect objects.

Remarks

-Range

See also on MDN

InsertNode(Node)

The Range.insertNode() method inserts a node at the start
of the Range.

[Value("insertNode")]
public GlobalObject.Undefined InsertNode(Node node)

Parameters

node Node

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

The new node is inserted at the start boundary point of the Range. If the
new node is to be added to a text Node, that Node is split
at the insertion point, and the insertion occurs between the two text nodes.

If the new node is a document fragment, the children of the document fragment are
inserted instead.

-The DOM interfaces index

See also on MDN

IntersectsNode(Node)

The Range.intersectsNode() method returns a boolean
indicating whether the given Node intersects the Range.

[Value("intersectsNode")]
public bool IntersectsNode(Node node)

Parameters

node Node

Returns

bool

A boolean.

Remarks

-The DOM interfaces index

See also on MDN

IsPointInRange(Node, ulong)

The isPointInRange() method of the Range interface determines whether a specified point is within the Range. The point is specified by a reference node and an offset within that node. It is equivalent to calling ComparePoint(Node, ulong) and checking if the result is 0.

[Value("isPointInRange")]
public bool IsPointInRange(Node node, ulong offset)

Parameters

node Node

offset ulong

Returns

bool

A boolean.

Remarks

-The DOM interfaces index

See also on MDN

SelectNode(Node)

The Range.selectNode() method sets the
Range to contain the Node and its contents. The parent
Node of the start and end of the Range will be the same as
the parent of the referenceNode.

[Value("selectNode")]
public GlobalObject.Undefined SelectNode(Node node)

Parameters

node Node

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-The DOM interfaces index

See also on MDN

SelectNodeContents(Node)

The Range.selectNodeContents() method sets the Range to contain the contents of a Node.

[Value("selectNodeContents")]
public GlobalObject.Undefined SelectNodeContents(Node node)

Parameters

node Node

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

The parent Node of the start and end of the Range will be the
reference node. The startOffset is 0, and the endOffset is the
number of child Nodes or number of characters contained in the reference
node.

-The DOM interfaces index

See also on MDN

SetEnd(Node, ulong)

The Range.setEnd() method sets the end position of a Range to be located at the given offset into the specified node. Setting
the end point above (higher in the document) than the start point will result in a
collapsed range with the start and end points both set to the specified end position.

[Value("setEnd")]
public GlobalObject.Undefined SetEnd(Node node, ulong offset)

Parameters

node Node

offset ulong

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-The DOM interfaces index

See also on MDN

SetEndAfter(Node)

The Range.setEndAfter() method sets the end position of a
Range relative to another Node. The parent
Node of end of the Range will be the same as that for the
referenceNode.

[Value("setEndAfter")]
public GlobalObject.Undefined SetEndAfter(Node node)

Parameters

node Node

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-The DOM interfaces index

See also on MDN

SetEndBefore(Node)

The Range.setEndBefore() method sets the end position of
a Range relative to another Node. The parent
Node of end of the Range will be the same as that for the
referenceNode.

[Value("setEndBefore")]
public GlobalObject.Undefined SetEndBefore(Node node)

Parameters

node Node

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-The DOM interfaces index

See also on MDN

SetStart(Node, ulong)

The Range.setStart() method sets the start position of a
Range.

[Value("setStart")]
public GlobalObject.Undefined SetStart(Node node, ulong offset)

Parameters

node Node

offset ulong

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

If the startNode is a Node of type Text,
Comment, or CDataSection, then startOffset is
the number of characters from the start of startNode. For other
Node types, startOffset is the number of child nodes between
the start of the startNode.

Setting the start point below (lower in the document) the end point will result in a
collapsed range with the start and end points both set to the specified start position.

-The DOM interfaces index

See also on MDN

SetStartAfter(Node)

The Range.setStartAfter() method sets the start position
of a Range relative to a Node. The parent
Node of the start of the Range will be the same as that
for the referenceNode.

[Value("setStartAfter")]
public GlobalObject.Undefined SetStartAfter(Node node)

Parameters

node Node

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-The DOM interfaces index

See also on MDN

SetStartBefore(Node)

The Range.setStartBefore() method sets the start position
of a Range relative to another Node. The parent
Node of the start of the Range will be the same as that
for the referenceNode.

[Value("setStartBefore")]
public GlobalObject.Undefined SetStartBefore(Node node)

Parameters

node Node

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-The DOM interfaces index

See also on MDN

SurroundContents(Node)

The surroundContents() method of the Range interface surrounds the selected content by a provided node. It extracts the contents of the range, replaces the children of newParent with the extracted contents, inserts newParent at the location of the extracted contents, and makes the range select newParent.

[Value("surroundContents")]
public GlobalObject.Undefined SurroundContents(Node newParent)

Parameters

newParent Node

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

An exception is thrown if the range partially contains any non-Text node. The range must only contain text nodes and completely selected nodes.

-The DOM interfaces index

See also on MDN