HTML DOM Range compareBoundaryPoints() method

Last Updated : 30 Jun, 2020

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>GeeksforGeeks</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>