摘要：在以及低于版本的火狐瀏覽器中，至少有一個(gè)對(duì)象屬于對(duì)象，因?yàn)槲谋具x區(qū)永遠(yuǎn)是一個(gè)層次結(jié)構(gòu)的連續(xù)部分。在版以后的火狐瀏覽器中，鼠標(biāo)選網(wǎng)頁(yè)內(nèi)容時(shí)按住鍵，可以選中多個(gè)文本域。方法檢測(cè)兩個(gè)對(duì)象是否是完全相同的。返回當(dāng)前對(duì)象是否包含了指定的對(duì)象。

原文來(lái)自TextRange object。
textRange對(duì)象代表document中一個(gè)連續(xù)的部分。

TextRange對(duì)象為實(shí)現(xiàn)一些實(shí)用功能提供了幾個(gè)屬性和方法。利用TextRange對(duì)象，你可以取得并修改文檔的任意部分；你可以得到文檔中的一個(gè)連續(xù)部分的定位以及一些其它的幾何屬性；你可以取得并修改文檔中已選中的內(nèi)容。

Internet Explorer以及部分Opera瀏覽器支持TextRange對(duì)象。

在火狐、Opera、Google Chrome以及Safari中，Range對(duì)象提供了簡(jiǎn)單的功能。Internet Explorer 9.0以后的版本同樣支持Range對(duì)象。

因?yàn)樗械默F(xiàn)代瀏覽器都支持Range對(duì)象，只有在Range對(duì)象不被支持的情況下才使用TextRange對(duì)象。本文后面的內(nèi)容將一起介紹這兩個(gè)對(duì)象。

通過(guò)createTextRange方法創(chuàng)建一個(gè)TextRange對(duì)象。body對(duì)象以及一些其它的HTML元素支持createTextRange方法。新創(chuàng)建的TextRange對(duì)象的邊界點(diǎn)（開(kāi)始點(diǎn)和結(jié)束點(diǎn)）與這些HTML元素的內(nèi)容對(duì)齊。

你可以使用document.createRange方法創(chuàng)建一個(gè)空的Range對(duì)象。后面的章節(jié)描述了修改一個(gè)Range對(duì)象的邊界點(diǎn)的方法。

在Internet Explorer中，有三種不同類(lèi)型的選區(qū)（selection）：

控件選區(qū) - 選區(qū)包含了控件。

文本選區(qū) - 選區(qū)只包含文本。

空選區(qū) - 即沒(méi)有選區(qū)（或者說(shuō)選中的內(nèi)容是不可用的）。

利用selection對(duì)象的type屬性可以得到選區(qū)的類(lèi)型。當(dāng)選區(qū)包含文本或者沒(méi)有選中的內(nèi)容時(shí)，用selection對(duì)象的createRange方法可以取得一個(gè)TextRange對(duì)象。返回的TextRange對(duì)象的邊界點(diǎn)與選區(qū)的內(nèi)容對(duì)齊。

為了得到選區(qū)的內(nèi)容，selection對(duì)象還支持其它的方法，比如說(shuō)createRangeCollection方法，它返回一個(gè)TextRanges集合，包含了若干個(gè)TextRange對(duì)象。每個(gè)TextRange對(duì)象代表這個(gè)選區(qū)的一個(gè)連續(xù)部分。該createRangeCollection方法對(duì)多重選區(qū)來(lái)說(shuō)很有用。但是Internet Explorer不支持它。所以使用createRange方法就足夠了。

  
使用selectionRange對(duì)象的getRangeAt方法可以取得一個(gè)代表當(dāng)前選區(qū)的Range對(duì)象。selectRange對(duì)象可以包含超過(guò)一個(gè)Range對(duì)象。每個(gè)Range對(duì)象代表選區(qū)的一個(gè)連續(xù)部分。

  
在Internet Explorer、Opera、Google Chrome、Safari以及低于3.0版本的火狐瀏覽器中，至少有一個(gè)Range對(duì)象屬于selectionRange對(duì)象，因?yàn)槲谋具x區(qū)永遠(yuǎn)是一個(gè)DOM層次結(jié)構(gòu)的連續(xù)部分。

  
在3.0版以后的火狐瀏覽器中，鼠標(biāo)選網(wǎng)頁(yè)內(nèi)容時(shí)按住Ctrl鍵，可以選中多個(gè)文本域。如果你想選中離散的文本塊，請(qǐng)使用addRange方法。

使用duplicate方法可以復(fù)制出一個(gè)已有的TextRange對(duì)象的副本。返回的對(duì)象與原始對(duì)象完全相同。

如果你想把一個(gè)TextRange對(duì)象的邊界點(diǎn)與一個(gè)元素的內(nèi)容對(duì)齊，而且這個(gè)元素支持createTextRange方法，請(qǐng)?jiān)谶@個(gè)元素上使用createTextRange方法。對(duì)其它元素，請(qǐng)使用body.createTextRange方法來(lái)創(chuàng)建一個(gè)TExtRange對(duì)象，并對(duì)這個(gè)必要的元素使用moveToElementText方法。

  
如果你想把一個(gè)Range對(duì)象的邊界點(diǎn)與一個(gè)元素或元素的內(nèi)容對(duì)齊，請(qǐng)使用selectNode或selectNodeContents方法。

使用moveStart方法和moveEnd方法可以移動(dòng)一個(gè)TextRange對(duì)象的開(kāi)始點(diǎn)的結(jié)束點(diǎn)。如果你想把一個(gè)TextRange對(duì)象的開(kāi)始點(diǎn)和結(jié)束點(diǎn)與另一個(gè)TextRange對(duì)象的開(kāi)始點(diǎn)和結(jié)束點(diǎn)對(duì)齊，請(qǐng)使用setEndPoint方法。

  
如果你想分別地修改一個(gè)Range的開(kāi)始點(diǎn)和結(jié)束點(diǎn)，請(qǐng)使用setStart方法、setStartBefore方法、setStartAfter方法，以及setEnd方法、setEndBefore方法、setEndAfter方法。

利用collapse方法，你可以移動(dòng)開(kāi)始點(diǎn)或者結(jié)束點(diǎn)，反之亦然。TextRange對(duì)象和Range對(duì)象都可以用這個(gè)方法。

擴(kuò)展TextRange對(duì)象的內(nèi)容，請(qǐng)使用expand方法以實(shí)現(xiàn)它。

利用offsetLeftc以及offsetTop屬性，可以得到該TextRange對(duì)象的坐標(biāo)。不能取得該元素以及一個(gè)TextRamge對(duì)象用開(kāi)始點(diǎn)和結(jié)束點(diǎn)定義的偏移。

如果你要取得一個(gè)TextRange對(duì)象的矩形邊界，請(qǐng)使用boundingLeft、boundingTop、boundWidth以及boundingHeight屬性。

如果你要取得一個(gè)TextRange對(duì)象的準(zhǔn)確形狀，請(qǐng)使用getClientRects方法。它將取得一個(gè)TextRectangles集合，包含了幾個(gè)TextRectangle對(duì)象。每個(gè)TextRectangle對(duì)象代表屬于這個(gè)TextRange對(duì)象的一行文本。

上面的提到所有的坐標(biāo)都是相對(duì)于瀏覽器窗口的左上角的。

document.elementFromPoint方法可以幫助你取得位于指定坐標(biāo)上的元素。

這個(gè)包含了整個(gè)TextRange對(duì)象的元素，如果你想要取得它在DOM層次結(jié)構(gòu)中元素的深度，請(qǐng)使用parentElement方法。

  
一個(gè)Range對(duì)象是用開(kāi)始點(diǎn)和結(jié)束點(diǎn)定義的。一個(gè)元素以及一個(gè)位置定義了一個(gè)點(diǎn)。如果這個(gè)元素只有文本內(nèi)容（TextNode、CDATASection或者CommentNode），這個(gè)位置指定了元素中的一個(gè)字符位置；如果這個(gè)元素并非只有文本內(nèi)容，這個(gè)位置指定了元素中一個(gè)子元素的序號(hào)索引。

  
和(endContainer,endOffset)屬性指定了一個(gè)Range對(duì)象的開(kāi)始點(diǎn)和結(jié)束點(diǎn)。startOffset屬性指定在這個(gè)startContainer元素中Range開(kāi)始的位置。endOffset屬性指定了在這個(gè)endContainer元素中Range結(jié)束的位置。

  
如果你想取得包含了整個(gè)Range對(duì)象的元素在DOM層次結(jié)構(gòu)中節(jié)點(diǎn)的深度，請(qǐng)使用commonAncestorContainer屬性。

當(dāng)一個(gè)TextRange的開(kāi)始點(diǎn)和結(jié)束點(diǎn)是同一個(gè)位置的時(shí)候，這個(gè)TextRange對(duì)象就是收縮的。你可以用多種方法來(lái)檢測(cè)它是否處于收縮狀態(tài)。比如說(shuō)，用TextRange對(duì)象的文本內(nèi)容來(lái)檢測(cè)。用text屬性可取得一個(gè)TextRange對(duì)象的文本內(nèi)容，并作為字符串來(lái)對(duì)待。如果這個(gè)text屬性代表的字符串的長(zhǎng)度返回0，則TextRange對(duì)象是收縮的。

  
使用collapsed方法可以檢測(cè)Range對(duì)象是否處于收縮狀態(tài)。

比較兩個(gè)TextRange對(duì)象的定位，可以使用compareEndPoints方法。它比較了這些對(duì)象的邊界點(diǎn)。

要想檢測(cè)一個(gè)TextRange對(duì)象是否包含另一個(gè)TextRange對(duì)象，可以用inRange方法。isEqual方法檢測(cè)兩個(gè)TextRange對(duì)象是否是完全相同的。

  
兩個(gè)Range對(duì)象的定位可以通過(guò)compareboundaryPoint方法來(lái)比較。它比較了這些對(duì)象的邊界，類(lèi)似于TextRange對(duì)象中的compareEndPoints方法。

  
請(qǐng)注意，雖然compareboundaryPoints方法和compareEndPoints方法的語(yǔ)法是相似的，但是同樣的案例，在不同的瀏覽器中，它們的行為是不同的。請(qǐng)閱讀這兩個(gè)方法的頁(yè)面以了解詳細(xì)區(qū)別。

  
如果你想檢測(cè)一個(gè)點(diǎn)（一個(gè)(element,position)對(duì)，其中position指定了element內(nèi)部的一個(gè)索引或者說(shuō)一個(gè)字符位置）是否位于一個(gè)Range內(nèi)部，請(qǐng)使用comparePoint或者isPointInRange方法。

text屬性能夠設(shè)置或取得一個(gè)TextRange對(duì)象的文本內(nèi)容，作為一個(gè)字符串。

如果你需要HTML格式的內(nèi)容，請(qǐng)使用htmlText屬性。

如果要替換一個(gè)帶有HTML格式文本的TextRange對(duì)象的內(nèi)容，請(qǐng)使用pasteHTML方法。你還可以用這個(gè)方法來(lái)刪除這些內(nèi)容（只需要在調(diào)用pasteHTML時(shí)用空字符串作為參數(shù)。）

  
toString方法取得一個(gè)Range對(duì)象的文本內(nèi)容，作為一個(gè)字符串。
  
  
如果你需要以層次結(jié)構(gòu)DOM的形式取得一個(gè)Range對(duì)象的內(nèi)容，請(qǐng)使用cloneContents方法和extractContents方法。這兩個(gè)方法會(huì)從Range內(nèi)容中建立一個(gè)DocumentFragment對(duì)象。
  
要想從document中移除一個(gè)Range對(duì)象的內(nèi)容，請(qǐng)使用deleteContents方法。
  
要想向Range對(duì)象中插入一個(gè)新元素，請(qǐng)使用insertNode方法。
  

直接調(diào)用TextRange對(duì)象的select方法（多文本選區(qū)中這個(gè)方法不可用）。
> 首先調(diào)用window.getSelection方法來(lái)接收一個(gè)從屬于當(dāng)前選區(qū)的selectionRange對(duì)象。如果你想給當(dāng)前選區(qū) 添加一個(gè)Range的內(nèi)容，直接調(diào)用addRange方法就可以把這個(gè)Range對(duì)象添加到selectionRange對(duì)象中。如果你只想要一個(gè)被選中的Range的內(nèi)容，在調(diào)用addRange方法加入這個(gè)Range對(duì)象之前，先調(diào)用selectionRange對(duì)象的removeAllRanges方法。

可以用execCommand方法編輯一個(gè)TextRange對(duì)象的內(nèi)容，就像在富文本編輯器中那樣。你可以修改背景色或者前景色，你可以使字體變成粗體、斜體，你可以用剪貼板剪切、復(fù)制以及粘貼內(nèi)容，它提供了一些其它的功能。

用getBookmark方法，可以把一個(gè)TextRange對(duì)象保存為bookmark。之后可以用moveToBookmark方法創(chuàng)建一個(gè)TextRange對(duì)象。該bookmark，以及這個(gè)用moveToBookmark方法創(chuàng)建的TextRange對(duì)象與被保存的那個(gè)TextRange對(duì)象是完全相同的。

用下面的方法可以訪問(wèn)textRange對(duì)象：

selection.createRange()

object.createTextRange()

TextRanges.item(index)

[1]定位父元素（offsetParent）：定位父元素并非是DOM層次結(jié)構(gòu)中的parentElement，而是離該元素最近的一個(gè)position屬性為relative、absolute、static的上層級(jí)元素。如果上層級(jí)元素中沒(méi)有這樣的元素，則定位父元素就是document.body。

這個(gè)示例演示了一個(gè)在document中取得選中內(nèi)容的跨瀏覽器解決方案。

HTML
    


    Select some text or element, or do not select anything, before you click on the button below.
    


    Test the selection!

HTML
    


    
The contents of the source element.
    


    Remove the contents of the source element!