javascript

Chapter 11: DOM Levels 2 and 3
You can collapse a range by using the collapse() method, which accepts a single argument: a Boolean
value indicating which end of the range to collapse to. If the argument is true , then the range is
collapsed to its starting point; if it is false , the range is collapsed to its ending point. To determine if a
range is already collapsed, you can use the collapsed property as follows:
range.collapse(true);
alert(range.collapsed);
//collapse to the starting point
//outputs “true”
Testing whether a range is collapsed is helpful if you aren ’ t sure if two nodes in the range are next to
each other. For example, consider this HTML code:
< p id=”p1” > Paragraph 1 < /p > < p id=”p2” > Paragraph 2 < /p >
If you don ’ t know the exact makeup of this code (for example, if it is automatically generated), you
might try creating a range like this:
var p1 = document.getElementById(“p1”);
var p2 = document.getElementById(“p2”);
var range = document.createRange();
range.setStartAfter(p1);
range.setStartBefore(p2);
alert(range.collapsed); //outputs “true”
In this case, the created range is collapsed because there is nothing between the end of p1 and the
beginning of p2 .
Comparing DOM Ranges
If you have more than one range, you can use the compareBoundaryPoints() method to determine if
the ranges have any boundaries (start or end) in common. The method accepts two arguments: the range
to compare to and how to compare. It is one of the following constant values:
❑
❑
❑
❑
Range.START_TO_START (0) — Compares the starting point of the first range to the starting
point of the second
Range.START_TO_END (1) — Compares the starting point of the first range to the end point of
the second
Range.END_TO_END (2) — Compares the end point of the first range to the end point of the
second
Range.END_TO_START (3) — Compares the end point of the first range to the starting point of
the second
The compareBoundaryPoints() method returns – 1 if the point from the first range comes before the
point from the second range, 0 if the points are equal, or 1 if the point from the first range comes after
the point from the second range. Here is an example:
var range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById(“p1”);
range1.selectNodeContents(p1);
(continued)
357