Skip to content
Related Articles

Related Articles

HTML DOM Range collapsed property
  • Last Updated : 29 Jun, 2020

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
Recommended Articles
Page :