雖然我們會(huì)講解用程序創(chuàng)建范圍對(duì)象，但是我們把精力主要集中在如何將用戶(hù)的選取范圍轉(zhuǎn)換成為W3C 范圍或者微軟的文檔范圍對(duì)象。

什么是范圍

范圍是指HTML文檔中的任意一部分內(nèi)容。一個(gè)范圍的開(kāi)始和結(jié)束點(diǎn)都可以是隨意的，甚至是相同的（一個(gè)空范圍）。最常見(jiàn)的范圍就是用戶(hù)選取的文本。當(dāng)用戶(hù)在頁(yè)面上選取了一部分，你就可以他的選取部分轉(zhuǎn)換為范圍對(duì)象。然而，你也可以讓程序自動(dòng)選擇范圍。

讓我們以下面的代碼為例。假設(shè)用戶(hù)選擇了下面的文字：

<h4 id="entry1196"><a
	
	class="external">Call for a Blogger's Code of Conduct</a></h4>

<p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p>

<ol>
	<li>Take responsibility not just for your own words, but for the
		comments you allow on your blog.</li>
	<li>Label your tolerance level for abusive comments.</li>
	<li>Consider eliminating anonymous comments.</li>
</ol>

你可以將用戶(hù)選擇轉(zhuǎn)換為一個(gè)包含用戶(hù)選擇范圍的文本的范圍對(duì)象（后面講）。根據(jù)范圍對(duì)象，你能找到開(kāi)始和結(jié)束的范圍點(diǎn)。如果你愿意你可以刪除它拷貝它或者用其他文本代替，甚至用HTML代碼來(lái)代替。

這是范圍對(duì)象最簡(jiǎn)單的例子了，因?yàn)樗话谋尽Ｏ旅嫖覀儊?lái)看一個(gè)復(fù)雜的例子：

<h4 id="entry1196"><a
	
	class="external">Call for a Blogger's Code of Conduct</a></h4>

<p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p>

<ol>
	<li>Take responsibility not just for your own words, but for the
		comments you allow on your blog.</li>
	<li>Label your tolerance level for abusive comments.</li>
	<li>Consider eliminating anonymous comments.</li>
</ol>

另外一個(gè)范圍對(duì)象被創(chuàng)建了，而且還包含HTML。問(wèn)題在于用戶(hù)的選擇范圍跨越了幾個(gè)元素。去掉其他的內(nèi)容，就剩下：

calls for a Blogger Code of Conduct. His proposals are:</p>

<ol>
	<li>Take responsibility not just for your own words, but for the
		comments you allow on your blog.</li>
	<li>Label your toleran

這是一段不完整的HTML。幸好所有的瀏覽器都會(huì)轉(zhuǎn)化一下：

<p>calls for a Blogger Code of Conduct. His proposals are:</p>

<ol>
	<li>Take responsibility not just for your own words, but for the
		comments you allow on your blog.</li>
	<li>Label your toleran</li></ol>

正如你所看到的，瀏覽器會(huì)添加最少的元素讓這段HTML完整，如果你復(fù)制的話，那么這些添加的東西也會(huì)被復(fù)制。

瀏覽器兼容性一覽

在我們繼續(xù)之前，有必要看看瀏覽器的兼容性。主要問(wèn)題在于這里有不下3個(gè)范圍對(duì)象的類(lèi)型，你必須都有所了解才行。

訪問(wèn)用戶(hù)選區(qū)

要處理用戶(hù)的選擇就必須先訪問(wèn)到用戶(hù)的選區(qū)。這會(huì)立馬又一個(gè)代碼分支：IE使用微軟的方法，其他瀏覽器使用Mozilla的方法：
復(fù)制代碼 代碼如下:
var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
    userSelection = document.selection.createRange();
}

在Mozilla，Safari，Opera里面現(xiàn)在userSelection是一個(gè)選擇對(duì)象（selection object），在IE中是一個(gè)文本范圍對(duì)象（text range object）。這個(gè)區(qū)別在后面的代碼中依然有效：IE的文本范圍對(duì)象和W3C的范圍對(duì)象以及Mozilla的選擇對(duì)象有根本的不同，每一部分的代碼都需要另一部分的補(bǔ)充。

要注意分支的順序：Mozilla Selection一定要在前。因?yàn)镺pera兩種都支持，如果你用window.getSelection()讀取用戶(hù)的選區(qū)，Opera就會(huì)創(chuàng)建一個(gè)選擇對(duì)象，可是你用document.selection的時(shí)候他也會(huì)創(chuàng)建一個(gè)文本范圍對(duì)象。

雖然Opera支持Mozilla和W3C模式很不錯(cuò)，但是支持IE確是有毛病，這樣就不得不把window.getSelection放在前面檢測(cè)。

userSelection的內(nèi)容
現(xiàn)在userSelection既是一個(gè)Mozilla的選擇對(duì)象又是IE的文本范圍對(duì)象。這樣他就可以使用所有的方法和屬性了。

然后，Mozilla的選擇對(duì)象userSelection里面保存的用戶(hù)選擇的文本（而不是HTML）。這樣寫(xiě)：

復(fù)制代碼 代碼如下:alert(userSelection)
就會(huì)產(chǎn)生：

calls for a Blogger Code of Conduct. His proposals are: Take responsibilitynot just for your own words, but for the comments you allow on your blog.Label your toleran如果想在微軟的文本范圍對(duì)象中得到相同的內(nèi)容你就要使用：

var selectedText = userSelection;if (userSelection.text)    selectedText = userSelection.text;現(xiàn)在selectedText就包含了用戶(hù)選擇的文本。如果你覺(jué)得這樣的信息足夠的話，那么就開(kāi)始準(zhǔn)備后面的工作吧。

從選擇對(duì)象創(chuàng)建范圍對(duì)象
很多時(shí)候，你想處理的是代表用戶(hù)選擇范圍的范圍對(duì)象（range object）。在微軟模式中條件已經(jīng)具備：userSelection就是一個(gè)文本范圍。在兼容W3C的瀏覽器中userSelection依然只是一個(gè)選擇對(duì)象，是時(shí)候創(chuàng)建一個(gè)與選擇對(duì)象內(nèi)容相同的范圍對(duì)象了。

按照下面這樣：
復(fù)制代碼 代碼如下:
var rangeObject = getRangeObject(userSelection);
function getRangeObject(selectionObject) {
    if (selectionObject.getRangeAt)
        return selectionObject.getRangeAt(0);
    else { // Safari!
        var range = document.createRange();
        range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
        range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
        return range;
    }
}

理想情況下，我們通過(guò)選擇對(duì)象的getRangeAt()來(lái)訪問(wèn)W3C范圍對(duì)象。這個(gè)方法會(huì)在給定的位置返回一個(gè)范圍對(duì)象：就像平常一樣第一個(gè)范圍對(duì)象的編號(hào)是0。（getRangeAt()已經(jīng)設(shè)計(jì)好如果有多處選擇的情況下怎么辦。在那種情況下你的代碼也很簡(jiǎn)單）

自從創(chuàng)建一個(gè)范圍

不幸的是Safari1.3不支持getRangeAt()。因此我們需要?jiǎng)?chuàng)建一個(gè)跟用戶(hù)選擇一樣的范圍對(duì)象。這是一個(gè)很好的練習(xí)機(jī)會(huì)，可以讓你知道如何創(chuàng)建自己的范圍對(duì)象。

很明顯的從創(chuàng)建一個(gè)對(duì)象開(kāi)始：

var range = document.createRange();

現(xiàn)在我們已經(jīng)有了一個(gè)空對(duì)象。為了把他插入到文檔里面去我們需要使用setStart()函數(shù)和setEnd()函數(shù)。

這兩個(gè)方法需要兩個(gè)參數(shù)：

1、在哪個(gè)DOM節(jié)點(diǎn)上開(kāi)始或者結(jié)束的？

2、從哪個(gè)文本偏移上開(kāi)始或者結(jié)束的？文本偏移就是指范圍對(duì)象的第一個(gè)或者最后一個(gè)字符的位置。

讓我們?cè)賮?lái)看一遍第二個(gè)例子：

	
	class="external">Call for a Blogger's Code of Conduct</a></h4>

<p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p>

<ol>
	<li>Take responsibility not just for your own words, but for the
		comments you allow on your blog.</li>
	<li>Label your tolerance level for abusive comments.</li>
	<li>Consider eliminating anonymous comments.</li>
</ol>

范圍從<p>節(jié)點(diǎn)開(kāi)始，并且文字偏移量是13，因?yàn)榈?4個(gè)字符已經(jīng)是包含在范圍里面的了（和通常一樣，編號(hào)從0開(kāi)始的）。

范圍從<li>結(jié)束，偏移量是17，因?yàn)榈?8個(gè)字符時(shí)范圍內(nèi)的最后一個(gè)字符了。

如何創(chuàng)建這個(gè)范圍對(duì)象：
復(fù)制代碼 代碼如下:
var startPar = [the p node];
var endLi = [the second li node];
range.setStart(startPar,13);
range.setEnd(endLi,17);

（注意現(xiàn)在創(chuàng)建的范圍對(duì)用戶(hù)不可見(jiàn)，只在瀏覽器的內(nèi)部）

現(xiàn)在我們已經(jīng)創(chuàng)建了一個(gè)范圍，我們也可以讀出他的開(kāi)始和結(jié)束點(diǎn)。startContainer和startOffset決定了范圍的開(kāi)始位置，同樣的endContainer和endOffset決定了結(jié)束位置。

讀取選區(qū)的開(kāi)始和結(jié)束位置
不幸的是，你并不知道用戶(hù)選擇了頁(yè)面哪個(gè)部分。所以你需要先讀出用戶(hù)選擇的開(kāi)始和結(jié)束的位置：這個(gè)必須在選擇對(duì)象（selection object）里面完成，因?yàn)檫@時(shí)候還沒(méi)有范圍對(duì)象（range object）。

我們剛剛看到每一個(gè)范圍對(duì)象都有標(biāo)明他開(kāi)始和結(jié)束位置的四個(gè)屬性。選擇對(duì)象也有相似的。當(dāng)然是另外的名字：anchorNode/anchorOffset代表開(kāi)始位置，focusNode/focusOffset代表結(jié)束位置。

所以讀出了選擇對(duì)象的開(kāi)始和結(jié)束位置之后我們就能創(chuàng)建范圍對(duì)象了：

復(fù)制代碼 代碼如下:
range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);

待續(xù)
現(xiàn)在我們有了范圍對(duì)象和微軟的文本范圍對(duì)象。以后我們會(huì)講解如何使用它們，并且解決不兼容的問(wèn)題。

翻譯地址：http://www.quirksmode.org/dom/range_intro.html

轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)

JavaScript技術(shù)：JavaScript DOM 學(xué)習(xí)第九章 選取范圍的介紹，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。