HTML DOM Range compareBoundaryPoints() 方法

compareBoundaryPoints() 方法用于比较当前 Range 对象的开始点与另一个 Range 对象的开始点或结束点，或者比较当前 Range 对象的结束点与另一个 Range 对象的开始点或结束点。

语法

rangeObject.compareBoundaryPoints(how, sourceRange);

参数

• how：指定比较方式的常量。常量有以下取值：
  • Range.START_TO_START：比较当前 Range 对象的开始点与另一个 Range 对象的开始点；
  • Range.START_TO_END：比较当前 Range 对象的开始点与另一个 Range 对象的结束点；
  • Range.END_TO_END：比较当前 Range 对象的结束点与另一个 Range 对象的结束点；
  • Range.END_TO_START：比较当前 Range 对象的结束点与另一个 Range 对象的开始点；
• sourceRange：另一个 Range 对象。

返回值

compareBoundaryPoints() 方法返回一个整数值。如果当前 Range 对象的开始点在另一个 Range 对象的位置之前，则返回 -1；如果当前 Range 对象的开始点在另一个 Range 对象的位置之后，则返回 1；如果两个位置相同，则返回 0。

示例

下面的示例演示了如何使用 compareBoundaryPoints() 方法。

<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<script>
    var range1 = document.createRange();
    range1.setStart(document.getElementById("text").childNodes[0], 5);
    range1.setEnd(document.getElementById("text").childNodes[0], 10);

    var range2 = document.createRange();
    range2.setStart(document.getElementById("text").childNodes[0], 2);
    range2.setEnd(document.getElementById("text").childNodes[0], 7);

    alert(range1.compareBoundaryPoints(Range.START_TO_START, range2)); // 输出 1
    alert(range1.compareBoundaryPoints(Range.END_TO_END, range2)); // 输出 -1
    alert(range1.compareBoundaryPoints(Range.START_TO_END, range2)); // 输出 0
</script>

在上面的示例中，我们首先创建了两个 Range 对象，分别是 range1 和 range2。range1 的开始位置是 " ipsum"，结束位置是 "dolor"，range2 的开始位置是 "rem i"，结束位置是 "sum d"。

然后我们使用 compareBoundaryPoints() 方法分别比较了两个 Range 对象的开始点和结束点。由于 range1 的开始点在 range2 的位置之后，所以第一个比较输出 1；由于 range1 的结束点在 range2 的位置之前，所以第二个比较输出 -1；由于 range1 和 range2 的开始点和结束点相同，所以第三个比较输出 0。

总结

compareBoundaryPoints() 方法是比较两个 Range 对象的位置的方法之一。通过指定不同的参数值，我们可以比较两个 Range 对象的不同位置。这个方法返回一个整数值，表示两个位置之间的关系，从而方便我们在编程中对 Range 对象进行操作。