The compareBoundaryPoints() method is used to compare the boundary points of the one Range with the boundary points of another range.
Syntax:
compare = firstRange.compareBoundaryPoints(comparision_method, otherRange);
Return Value: This method returns a number indicating the position of boundary points:
- -1 : returns -1 if boundary point of 1st range lies before the boundary point of 2nd range.
- 0 :Â returns 0 if boundary point of 1st range lies equal to the boundary point of 2nd range.
- 1 :Â returns 1 if boundary point of 1st range lies after the boundary point of 2nd range.
Parameters: This method contain 2 parameters:
1. A constant describing the comparison method:
- Range.END_TO_END to compare the end boundary-point of 1st Range to the end boundary-point of 2nd Range.
- Range.END_TO_START compares the end boundary-point of 1st Range to the start boundary-point of 2nd Range.
- Range.START_TO_END compares the start boundary-point of 1st Range to the end boundary-point of 2nd Range.
- Range.START_TO_START compares the start boundary-point of 1st Range to the start boundary-point of 2nd Range.
2. otherRange : Other range for comparison.
Example: In the example, we will create and compare two ranges.
HTML
<html><head><title>HTML DOM range compareBoundaryPoints() method</title>Â Â Â </head><body>Â Â Â Â <h1>neveropen</h1>Â Â Â Â <div>This is the Range 1 Content</div>Â Â Â Â <div>This is the Range 2 Content</div></body><script>Â Â Â Â var range1, range2, compare;Â Â range1 = document.createRange();Â Â range1.selectNode(document.getElementsByTagName("div")[0]);Â Â console.log(range1);Â Â range2 = document.createRange();Â Â range2.selectNode(document.getElementsByTagName("div")[1]);Â Â console.log(range2);Â Â compare = range1.compareBoundaryPoints(Range.START_TO_END, range2);Â Â console.log(compare);</script></html> |
Output: In console, we can see the logged comparison of both the ranges along with those ranges.
output is -1, as startOffset of range1 is 3 and is before the endOffset of range2 is 6.
Supported Browsers: The browsers supported by DOM compareBoundaryPoints() method are listed below:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
