The Range is the most fundamental idea in selection. It is just a pair of border points and can be defined as “range start” and “range end.” We use the method "Document.createRange()" to create a range. We can use the "getRangeAt()" method of the Selection object and the "caretRangeFromPoint()" function of the Document object to retrieve Range objects.
You can transform a selection to a Range as soon as the user selects (part of) the text on an HTML page. You can copy or delete it or replace it with another text or even a bit of HTML. Typically, a user will only select one range at a time; however, it is possible to select numerous ranges (e.g., using the Control key).
To create a range object, we use the following constructor:
- Range(): Returns a Range object whose start and endpoints are the global Document.
Compare the Range's boundary points to those of another Range.
Returns a constant indicating whether the Node is in the range before, after, inside, or around it.
Returns -1, 0 or 1 depending on whether the point is inside, outside, or before the Range.
The Range collapsed to one of its boundary points.
Returns a DocumentFragment that duplicates a Range's nodes.
Returns a Range object with the same boundary points as the original Range.
This method creates a DocumentFragment from a specified code string.
This method removes a Range's contents from the Document.
Allows you to stop using the Range to enhance your performance.
This method moves the contents of a Range into a DocumentFragment from the document tree.
This is the union of all the rectangles returned by range. Returns a DOMRect object that boundaries the whole contents of the range.getClientRects().
This method returns a list of DOMRect objects containing the aggregated results of "Element.getClientRects()" for all items in the Range.
Returns a boolean indicating whether or not the specified point is within the Range.
Adds a Node at the beginning of a Range.
If the specified node intersects the Range, this method returns a boolean value.
Sets the range in which the Node and its contents will be contained.
Sets the Range to hold a Node's contents.
This method sets the Range's end position.
This method sets the Range's start position.
The contents of a Range are moved to a new Node.
The Range's text is returned when this function is called.
Implementation of Range Methods
In the above example we have implemented the deleteContents(), extractContents, insertNode(), surroundNode() methods. The output shows that the “insertNode()” method has inserted the text “insertedNODE” into the original text. Similarly, we can implement the remaining methods as well.
A Selection object represents the user-selected text range or the caret's current position. A user can choose from left to right (in document order) or right to left (reverse of document order). The anchor indicates where the user started the selection, whereas the focus indicates where the user finished it. When you use a desktop mouse to create a selection, the anchor is where you press the mouse button, and the focus is where you let go of the mouse button.
We call the window.getSelection() function to get a Selection object for examining or manipulating it.
There are various built-in methods for Selection. The methods are as follows:
We use this method to add an item to the selection as a Range object.
This method reduces the current selection to a single point.
The selection is collapsed to the end of the last range in the selection.
The selection is collapsed to the beginning of the first range in the selection.
Indicates whether or not a particular node is included in the selection.
The content of the selection is removed from the document.
This method sets the selection's emphasis to a specific location.
Returns a Range object that represents one of the current ranges.
The current selection has been changed.
A range is removed from the selection.
All ranges are removed from the option.
The children of the specified node are added to the selection.
This method sets the selection to a range that includes all or parts of two DOM nodes and any content between them.
Returns the string that the selected object is presently representing, i.e. the currently selected text.
Implementation of Selection Methods
Here, the text “Lorem” gets the offset 0, and “ipsum” gets 1. So the selection ranges from “ipsum” to “amet.” We have implemented the methods “Selection.removeAllRanges()” and “Selection.addRange().”
There are events taking place to keep track of the selection process:
- elem.onselectstart: When a selection begins on an element only (or inside it). For example, when the user hits the mouse button, the cursor begins to move. The start of the selection is cancelled if the default action is disabled. As a result, beginning a selection from this element is no longer feasible, but the element remains selectable. The visitor only needs to begin the choosing process from somewhere else.
- document.onselectionchange: When a selection changes or starts, "document.onselectionchange" is called. Please note that this handler can only be configured on a document, and it will track all selections made within it.
Frequently Asked Questions
The start and endpoints of a Range object define it. An element and its position define a point. The position specifies a character position within the element if the element solely includes text content (TextNode, CDATASection, or CommentNode), otherwise, it specifies the index of a child of the element.
Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, interview bundle, follow guided paths for placement preparations and much more!