更新時(shí)間：2014-09-24一、Range對(duì)象的概念
Range對(duì)象代表頁面上的一段連續(xù)區(qū)域，通過Range對(duì)象，可以獲取或修改頁面上的任何區(qū)域，可以通過如下創(chuàng)建一個(gè)空的
Range對(duì)象，如下：
var range = document.createRange();
在html5中，每一個(gè)瀏覽器窗口及每一個(gè)窗口中都有一個(gè)selection對(duì)象，代表用戶鼠標(biāo)在頁面中所選取的區(qū)域，(注意：
過測(cè)試IE9以下的瀏覽器不支持Selection對(duì)象), 可以通過如下語句創(chuàng)建selection對(duì)象；
var selection = document.getSelection();或者
var selection = window.getSelection();
每一個(gè)selection對(duì)象都有一個(gè)或者多個(gè)Range對(duì)象，每一個(gè)range對(duì)象代表用戶鼠標(biāo)所選取范圍內(nèi)的一段連續(xù)區(qū)域，在firefox中，可以通過ctrl鍵可以選取多個(gè)連續(xù)的區(qū)域，因此在firefox中一個(gè)selection對(duì)象有多個(gè)range對(duì)象，在其他瀏覽器中，用戶只能選取一段連續(xù)的區(qū)域，因此只有一個(gè)range對(duì)象。
可以通過selection對(duì)象的getRangeAt方法來獲取selection對(duì)象的某個(gè)Range對(duì)象，如下：
var range = document.getSelection().getRangeAt(index);
getRangeAt方法有一個(gè)參數(shù)index，代表該Range對(duì)象的序列號(hào)；我們可以通過Selection對(duì)象的rangeCount參數(shù)的值判
用戶是否選取了內(nèi)容；
1、當(dāng)用戶沒有按下鼠標(biāo)時(shí)候，該參數(shù)的值為0.
2、當(dāng)用戶按下鼠標(biāo)的時(shí)候，該參數(shù)值為1.
3、當(dāng)用戶使用鼠標(biāo)同時(shí)按住ctrl鍵時(shí)選取了一個(gè)或者多個(gè)區(qū)域時(shí)候，該參數(shù)值代表用戶選取區(qū)域的數(shù)量。
4、當(dāng)用戶取消區(qū)域的選取時(shí)，該屬性值為1，代表頁面上存在一個(gè)空的Range對(duì)象；
如下代碼測(cè)試：
<h3>selection對(duì)象與range對(duì)象的使用實(shí)例</h3>
<input type="button" value="點(diǎn)擊我" onclick="rangeTest()"/>
<div id="showRange"></div>
JS代碼如下：
<script>
function rangeTest() {
var html,
showRangeDiv = document.getElementById("showRange"),
selection = document.getSelection();
if(selection.rangeCount > 0) {
html = "你選取了" + selection.rangeCount + "段內(nèi)容<br/>";
for(var i = 0; i < selection.rangeCount; i++) {
var range = selection.getRangeAt(i);
html += "第" + (i + 1) + "段內(nèi)容為：" + range + "<br/>";}
showRangeDiv.innerHTML = html;
}
}
</script>
如上代碼，當(dāng)用戶選取一段文字后，點(diǎn)擊按鈕，會(huì)顯示選取的文字，如下在firefox下效果：
在chrome瀏覽器下如下所示：
二、Range對(duì)象的屬性和方法
屬性如下：
collapsed(boolean) :用于判斷Range對(duì)象所代表的區(qū)域的開始點(diǎn)與結(jié)束點(diǎn)是否處于相同的位置，如果相同該屬性值返回true；commonAncestorContainer(node):用于返回Range對(duì)象所代表的區(qū)域位于什么節(jié)點(diǎn)之中，該屬性值為包含了該區(qū)域的最低層節(jié)點(diǎn)(一個(gè)節(jié)點(diǎn)可能是一個(gè)元素，也可能是一段完整文字)的節(jié)點(diǎn)。
endContainer(node):用于返回Range對(duì)象所代表的區(qū)域的終點(diǎn)位于什么節(jié)點(diǎn)之中，該屬性值為包含了該區(qū)域終點(diǎn)的最底層節(jié)點(diǎn)。
endOffset(整數(shù)值類型)：用于返回Range對(duì)象所代表的區(qū)域的終點(diǎn)與包含該終點(diǎn)的節(jié)點(diǎn)的起點(diǎn)之間的距離。
startContainer(node):用于返回Range對(duì)象所代表的區(qū)域的起點(diǎn)位于什么節(jié)點(diǎn)之中，該屬性值為包含了該區(qū)域起點(diǎn)的最底層節(jié)點(diǎn)。
startOffset(整數(shù)值類型)：用于返回Range對(duì)象所代表的區(qū)域的起點(diǎn)與包含該起點(diǎn)的節(jié)點(diǎn)的起點(diǎn)之間的距離。
下面還有很多方法，方法的含義比較難理解，我這邊也是看到書上這么寫的，順便自己做了demo試了下，理解下其含義。以后需要使用到的可以看一下即可；selectNode方法：Range對(duì)象的selectNode方法用于將Range對(duì)象的起點(diǎn)指定為某個(gè)節(jié)點(diǎn)的起點(diǎn)，將Range對(duì)象的終點(diǎn)指定為該節(jié)點(diǎn)的終點(diǎn)，使Range對(duì)象所代表的區(qū)域中包含該節(jié)點(diǎn)。使用方法如下：
rangeObj.selectNode(node);上面的rangeObj代表一個(gè)Range對(duì)象，該方法使用一個(gè)參數(shù)，代表頁面中的一個(gè)節(jié)點(diǎn)。
selectNodeContents方法：用于將Range對(duì)象的起點(diǎn)指定為某個(gè)節(jié)點(diǎn)中的所有內(nèi)容的起點(diǎn)，將Range對(duì)象的終點(diǎn)指定為該節(jié)
所有內(nèi)容的終點(diǎn)，使Range對(duì)象所代表的區(qū)域中包含該節(jié)點(diǎn)的所有內(nèi)容。使用方法如下：
rangeObj.selectNodeContents(node);
含義如上所示;
deleteContents方法：用于將Range對(duì)象中所包含的內(nèi)容從頁面中刪除，使用方法如下所示：
rangeObj.deleteContents();
我們下面來做一個(gè)demo，來理解下上面的三個(gè)方法；如下代碼：
<div id="div" style="background-color:#e0a0b0;width:300px;height:50px;">元素中的內(nèi)容</div>
<button onclick="deleteRangeContents(true)">刪除內(nèi)容</button>
<button onclick="deleteRangeContents(false)">刪除元素</button>
頁面上顯示如下：
JS代碼如下：
<script>
function deleteRangeContents(flag) {
var div = document.getElementById("div");
var rangeObj = document.createRange();
if(flag) {
// selectNodeContents指選中Range對(duì)象中的所有內(nèi)容 進(jìn)行刪除掉
rangeObj.selectNodeContents(div);
rangeObj.deleteContents();
}else {
rangeObj.selectNode(div);
rangeObj.deleteContents();
}
}
</script>
當(dāng)代碼執(zhí)行完document.createRange();時(shí)候，我們看看rangeObj對(duì)象的值是多少
當(dāng)點(diǎn)擊刪除內(nèi)容的時(shí)候，就把相應(yīng)的內(nèi)容刪掉；如下所示：
代碼執(zhí)行到下面的，rangeObj對(duì)象的值變成如下：
當(dāng)我們點(diǎn)擊刪除元素的按鈕時(shí)候，如
