適当な文章を強調してみたりする。
<p class="sample" id="smp1">適当な文章を<em>強調して</em>みたりする。</p>
function rangetest(){ if(document.implementation.hasFeature("Range","2.0")){ rng = document.createRange(); samplenode = document.getElementById('smp1').firstChild; //ノード「適当な文章を」 rng.setStartBefore(samplenode); //ノード「適当な文章を」の前 alert('開始点 コンテナ'+ rng.startContainer.nodeName + ' オフセット' + rng.startOffset); samplenode = document.getElementById('smp1').lastChild; //ノード「みたりする。」 rng.setEndBefore(samplenode); //ノード「みたりする。」の前 alert('終了点 コンテナ'+ rng.endContainer.nodeName + ' オフセット' + rng.endOffset); rng2 = document.createRange(); rng2.selectNode(document.getElementsByTagName('em')[0]); //<em>〜</em>のすぐ外に境界点を設定。 //この時点で、<p class="sample" id="smp1">{rngの開始点}適当な文章を{rng2の開始点}<em>強調して</em>{rngの終了点}{rng2の終了点}みたりする。</p>、となっている。 switch(rng.compareBoundaryPoints(1,rng2)){ case -1: alert('前'); break; case 0: alert('同じ'); break; case 1: alert('後'); } //rng2の場所を変える rng2.setStart(document.getElementById('smp1').firstChild,3); rng2.setEnd(document.getElementById('smp1').childNodes[2],3); alert('rng2の文字列だけ:'+rng2.toString()); df = rng2.cloneContents(); document.getElementById('smp1').appendChild(df); rng.detach(); rng2.detach(); } }