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>neveropen</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>neveropen</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 1 and above
- Edge 12 and above
- Firefox 1 and above
- Safari 1 and above
- Opera 9 and above
- Internet Explorer 9 and above
