js中的range。范圍api(一)

　　ie8+支持一個range api.這個api使用組要分為三個步驟，

   第一步創建一個range實例:

      var range=document.createRange();

    第二步選擇一個范圍:

     如果只是簡單選擇一個dom節點，可以使用selectNode和selectNodeContents方法，只需要在range上調用方法，傳入要選擇的節點即可，這兩個方法都沒有返回值，其中               selectNode是選擇整個節點，而selectNodeContents則是選擇節點中包含的元素。如果選擇的是一個文本節點，那么這兩個方法返回相同。

  range.selectNode() 

  range.selectContents();

   如果是較復雜的選擇，可以使用setStartBefore,setStartAfter,setEndBefore,setEndAfter這一組api，這一組api可以實現更加復雜一點的范圍選擇，方法都接收一個參數，即要選擇的范圍的dom節點，通常需要兩個方法一起使用來決定一個范圍，其中setStartBefore（node）表示將范圍起點設置到node之前，setStartAfter（node）表示將范圍起點設置到node之后，setEndBefore（node）表示將范圍結束點設置到node之前，setEndAfter（node）表示將范圍結束點設置到node之后，例如：

<div id="contain">
        <ul id="list">
            <li class="data" id="list1">dfsdfsdf2341</li>
            <li class="mydata myname" >2</li>
            <li class="newdata">3</li>
            <li class="htmldata" id="list2">4234234234dsfs</li>
        </ul>
    </div>

<script>
var range1 = document.createRange();
var range2 = document.createRange();
var firstEle=document.getElementById("link1");
var ele=document.getElementById("list1").firstChild;
var ele1=document.getElementById("list2");
range1.setStartAfter(ele1);
range1.setStartBefore(ele)；
</script>

這樣就選擇了整個ul里面的所有的li。

第三種是使用setStart和setEnd這兩個api。這兩個api都接受兩個參數，第一個參數是要選擇的節點，第二個參數是偏移量，即setStart(node,startOffset),setEnd(node,endOffset),這兩個api能更加精確的控制范圍，最適合用來選擇文本節點，比如：

   <script>
    var range1 = document.createRange();
    var range2 = document.createRange();
    var firstEle=document.getElementById("link1");
    var ele=document.getElementById("list1").firstChild;
    var ele1=document.getElementById("list2");
    range1.setStart(ele,0);
    range1.setEnd(ele,ele.length-1);
    </script>