HTML DOM Range collapsed property

Last Updated : 14 Jul, 2022

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

<!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>

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

<!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>