Skip to content
Related Articles

Related Articles

Improve Article

HTML DOM Range collapse() Method

  • Last Updated : 29 Jun, 2020

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.

Syntax:

range.collapse(boolean);

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM range 
        collapse() method
    </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <p>This is the Range Content</p>
  
    <button onclick="collapse()">
        Click To Collapse Range
    </button>
  
    <script>
        let range = document.createRange();
        let referenceNode = document.
            getElementsByTagName('p').item(0);
        range.selectNode(referenceNode);
        console.log("Before")
        console.log(range);
        console.log(range.collapsed);
        function collapse() {
            console.log("After")
            range.collapse(true);
            console.log(range);
            console.log(range.collapsed);
        }
    </script>
</body>
  
</html>

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :