The collapse() method collapses the Range to one of its boundary points.
A collapsed Range is an empty range and doesn’t contain any content.
Syntax:
range.collapse(boolean);
Parameters: This method takes boolean value as parameter.
- true: Collapses the Range to its start.
- false: Collapses the Range to its end.
Return value: This method has no return value.
Example: This example shows how to collapse a range using this method. Collapsed property is used to check if the range is collapsed or not.
HTML
<!DOCTYPE html> <html>
<head>
<title>
HTML DOM range
collapse() method
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>This is the Range Content</p>
<button onclick="collapse()">
Click To Collapse Range
</button>
<script>
let range = document.createRange();
let referenceNode = document.
getElementsByTagName('p').item(0);
range.selectNode(referenceNode);
console.log("Before")
console.log(range);
console.log(range.collapsed);
function collapse() {
console.log("After")
range.collapse(true);
console.log(range);
console.log(range.collapsed);
}
</script>
</body>
</html>
|
Output: In console, we can see that the range is collapsed using this method.
-
Before Clicking the Button:
-
After Clicking the Button:
It can be seen that start Offset and en Offset are now set to 3 after collapsing
Supported Browsers: The browsers supported by DOM Range collapse() method are listed below:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera