Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML DOM Range collapse() Method

Improve Article
Save Article
Like Article
  • Last Updated : 29 Jun, 2020
Improve Article
Save Article
Like Article

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

A collapsed Range is an empty range and doesn’t contain any content.



Parameters: This method takes boolean value as parameter.

  • true: Collapses the Range to its start.
  • false: Collapses the Range to its end.

Return value: This method has no return value.

Example: This example shows how to collapse a range using this method. Collapsed property is used to check if the range is collapsed or not.


<!DOCTYPE html>
        HTML DOM range 
        collapse() method
    <p>This is the Range Content</p>
    <button onclick="collapse()">
        Click To Collapse Range
        let range = document.createRange();
        let referenceNode = document.
        function collapse() {

Output: In console, we can see that the range is collapsed using this method.

  • Before Clicking the Button:

  • After Clicking the Button:

    It can be seen that start Offset and en Offset are now set to 3 after collapsing

Supported Browsers: The browsers supported by DOM Range collapse() method are listed below:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!