DOMレンジの折りたたみ
レンジを空にする（つまりドキュメントのどの部分も選択していない状態にする）には、レンジの折りたたみ（collapse）を行います。レンジの折りたたみは、テキストボックスの動作に似ています。テキストボックスにテキストが含まれている場合、マウスを使用して単語全体を強調表示することができます。しかし、もう一度マウスの左ボタンをクリックすると、選択が解除され、2つの文字の間にカーソルが置かれます。レンジの折りたたみを行うときは、ドキュメントのパーツ間の位置を指定します（具体的には、レンジ選択の先頭または末尾になります）。図6に、レンジの折りたたみを行ったときの様子を示します。
レンジを折りたたむにはcollapse()メソッドを使用します。このメソッドは、折りたたみの方向を示すブール型の引数を1つ取ります。引数がtrueの場合はレンジの先頭に向けて折りたたみ、falseの場合はレンジの末尾に向けて折りたたみます。レンジが折りたたまれているかどうかを判別するには、collapsedプロパティを使用します。
oRange.collapse(true); //collapse to the starting point alert(oRange.collapsed); //outputs "true"
レンジが折りたたまれているかどうかのテストは、レンジ内の2つのノードが隣り合っているかどうかを確認するときに役立ちます。たとえば、次のようなHTMLコードがあるとします。
<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"
この例では、p1の末尾とp2の先頭の間に何もないので、作成したレンジは折りたたまれています。
DOMレンジの比較
複数のレンジがある場合は、compareBoundaryPoints()メソッドを使用して、それらのレンジに共通の境界（開始または終了）が含まれていないかどうかを確認できます。このメソッドは2つの引数を取り、これらの引数で比較対象のレンジと比較方法を指定します。比較方法は次の定数値で指定します。
| 定数値 | 定数名 | 挙動 |
| 0 | START_TO_START | 1つ目のレンジの開始点と2つ目のレンジの開始点を比較します |
| 1 | START_TO_END | 1つ目のレンジの開始点と2つ目のレンジの終了点を比較します |
| 2 | END_TO_END | 1つ目のレンジの終了点と2つ目のレンジの終了点を比較します |
| 3 | END_TO_START | 1つ目のレンジの終了点と2つ目のレンジの開始点を比較します |
compareBoundaryPoints()メソッドは、1つ目のレンジの境界点が2つ目のレンジの境界点よりも前にある場合は-1を返し、2つの境界点が等しい場合は0を返し、1つ目のレンジの境界点が2つ目のレンジの境界点よりも後にある場合は1を返します。
次に例を示します。
var oRange1 = document.createRange(); var oRange2 = document.createRange(); var oP1 = document.getElementById("p1"); oRange1.selectNodeContents(oP1); oRange2.selectNodeContents(oP1); oRange2.setEndBefore(oP1.lastChild); alert(oRange1.compareBoundaryPoints(Range.START_TO_START, oRange2)); //outputs 0 alert(oRange1.compareBoundaryPoints(Range.END_TO_END, oRange2)); //outputs 1;
このコードでは、2つのレンジがどちらもselectNodeContents()のデフォルト値を使用しているので、2つの境界点がまったく同じ位置にあります。したがって、1つ目のcompareBoundaryPoints()メソッドは0を返します。しかし、oRange2については後からsetEndBefore()を使用して終了点を変更し、oRange1の終了点がoRange2の終了点よりも後に来るようにしているので（図7を参照）、2つ目のcompareBoundaryPoints()メソッドは1を返します。
DOMレンジの複製
必要に応じて、cloneRange()メソッドを使用してレンジを複製することができます。このメソッドは、呼び出したレンジの正確な複製を作成します。
var oNewRange = oRange.cloneRange();
新しいレンジには元のレンジとまったく同じプロパティが含まれており、これらのプロパティの値は、元のレンジに影響を与えずに修正できます。
クリーンアップ
レンジを使い終わったら、detach()メソッドを呼び出してシステムリソースを解放することをお勧めします。これは必須の作業ではなく、参照されなくなったレンジは最終的にガベージコレクタによって回収されます。しかし、レンジを使い終わって不要になったらdetach()を呼び出すようにすると、余計なメモリを占有せずに済みます。
oRange.detach();
Copyright 2005 by WROX. All rights reserved. Reproduced here by permission of the publisher.
