HTML DOM Range collapsed property

The collapsed property returns a Boolean value indicating whether the starting and ending points of the Range are at the same position or not. It returns true if the starting and ending points of the Range are the same, false otherwise. This is a read-only property.

A Collapsed range is an empty range and contains no content.

Syntax:

val = range.collapsed;

Return Value: The return value of this property is:

  • true: When starting and ending points of range are same.
  • false: When starting and ending points of range are not same.

Example 1: When starting and ending points of range are same.



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM range
        collapsed property
    </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <script>
        let range = document.createRange();
        val = range.collapsed;
        console.log(val);
    </script>
</body>
  
</html>

chevron_right


Output: Here, range has no content so this property will return true in console.

Example 2: When starting and ending points of range are not same.

In this example, we had given some content to the range and then applied this property to get false value.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM range 
        collapsed property
    </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <p>This is the Range Content</p>
  
    <script>
        let range = document.createRange();
        let referenceNode = document
            .getElementsByTagName('p').item(0);
        range.selectNode(referenceNode);
        console.log(range.toString());
        val = range.collapsed;
        console.log(val);
    </script>
</body>
  
</html>

chevron_right


Output: In console, value can be seen.

Supported Browsers: The browsers supported by DOM Range collapsed property are listed below:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
  • Internet Explorer

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.