Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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




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

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!