Collapsing, cloning, & comparing ranges

Collapsing, cloning, & comparing ranges

1. To empty a range, (that is, to have it select no part of the document), you collapse it.
   • Collapsing a range resembles the behavior of a text box.
   • When you have text in a text box, you can highlight an entire word using the mouse.
   • However, if you left-click the mouse again, the selection is removed and the cursor is located between two letters.
   • When you collapse a range, you are setting its locations between parts of a document, either at the beginning of the range selection or at the end.
2. You can either collapse at the beginning or end of a range
   • Original range
     • <p id="p1"><b>Hello</b>World</p>
   • oRange.collapse(true) - collapses the range to the beginning
     • <p id="p1"><b>He|llo</b>World</p>
   • oRange.collapse(false) - collapses the range at the end
   • <p id="p1"><b>Hello</b>Wo|rld</p>
3. You can test if two nodes in a range are next to each other
   • <p id="p1">Paragraph 1</p><p id="p2">Paragraph 2</p>
   • var oP1 = document.getElementById("p1");
   • var oP2 = document.getElementById("p2");
   • var oRange = document.createRange();
   • oRange.setStartAfter(oP1);
   • oRange.setStartBefore(oP2);
   • alert(oRange.collapsed); //outputs "true"
4. To clone a range use the following
   • var oNewRange = oRange.cloneRange();
   • The new range contains all of the same properties and can be modified without affecting the original in any way.
5. Comparing DOM ranges
   • You can determine if two ranges have any boundaries (start or end) in common.
   • Use the compareBoundaryPoints() method on a range object. It takes two arguments: a constant to tell it how to compare and a range to compare to.
     • 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_START (2) - Compares the end point of the first range to the end point of the second.
     • Range.END_TO_END (3)Compares the end point of the first range to the start point of the second.
   • Here are two examples
     • oRange.compareBoundaryPoints(Range.START_TO_START, oRange2) - returns 0 - they are equal
     • oRange.compareBoundaryPoints(Range.END_TO_END, oRange2) - returns 1 - point 1 comes after point 2
   • compareBoundaryPoints() result returns the following.
     • -1 - if the point from the first range comes before the point from the second range.
     • 0 - if the points are equal.
     • 1 - if the point from the first range comes after the point from the second range.