摘要：在以及低于版本的火狐瀏覽器中，至少有一個對象屬于對象，因為文本選區永遠是一個層次結構的連續部分。在版以后的火狐瀏覽器中，鼠標選網頁內容時按住鍵，可以選中多個文本域。方法檢測兩個對象是否是完全相同的。返回當前對象是否包含了指定的對象。

原文來自TextRange object。
textRange對象代表document中一個連續的部分。

TextRange對象為實現一些實用功能提供了幾個屬性和方法。利用TextRange對象，你可以取得并修改文檔的任意部分；你可以得到文檔中的一個連續部分的定位以及一些其它的幾何屬性；你可以取得并修改文檔中已選中的內容。

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

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

因為所有的現代瀏覽器都支持Range對象，只有在Range對象不被支持的情況下才使用TextRange對象。本文后面的內容將一起介紹這兩個對象。

通過createTextRange方法創建一個TextRange對象。body對象以及一些其它的HTML元素支持createTextRange方法。新創建的TextRange對象的邊界點（開始點和結束點）與這些HTML元素的內容對齊。

你可以使用document.createRange方法創建一個空的Range對象。后面的章節描述了修改一個Range對象的邊界點的方法。

在Internet Explorer中，有三種不同類型的選區（selection）：

控件選區 - 選區包含了控件。

文本選區 - 選區只包含文本。

空選區 - 即沒有選區（或者說選中的內容是不可用的）。

利用selection對象的type屬性可以得到選區的類型。當選區包含文本或者沒有選中的內容時，用selection對象的createRange方法可以取得一個TextRange對象。返回的TextRange對象的邊界點與選區的內容對齊。

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

  
使用selectionRange對象的getRangeAt方法可以取得一個代表當前選區的Range對象。selectRange對象可以包含超過一個Range對象。每個Range對象代表選區的一個連續部分。

  
在Internet Explorer、Opera、Google Chrome、Safari以及低于3.0版本的火狐瀏覽器中，至少有一個Range對象屬于selectionRange對象，因為文本選區永遠是一個DOM層次結構的連續部分。

  
在3.0版以后的火狐瀏覽器中，鼠標選網頁內容時按住Ctrl鍵，可以選中多個文本域。如果你想選中離散的文本塊，請使用addRange方法。

使用duplicate方法可以復制出一個已有的TextRange對象的副本。返回的對象與原始對象完全相同。

如果你想把一個TextRange對象的邊界點與一個元素的內容對齊，而且這個元素支持createTextRange方法，請在這個元素上使用createTextRange方法。對其它元素，請使用body.createTextRange方法來創建一個TExtRange對象，并對這個必要的元素使用moveToElementText方法。

  
如果你想把一個Range對象的邊界點與一個元素或元素的內容對齊，請使用selectNode或selectNodeContents方法。

使用moveStart方法和moveEnd方法可以移動一個TextRange對象的開始點的結束點。如果你想把一個TextRange對象的開始點和結束點與另一個TextRange對象的開始點和結束點對齊，請使用setEndPoint方法。

  
如果你想分別地修改一個Range的開始點和結束點，請使用setStart方法、setStartBefore方法、setStartAfter方法，以及setEnd方法、setEndBefore方法、setEndAfter方法。

利用collapse方法，你可以移動開始點或者結束點，反之亦然。TextRange對象和Range對象都可以用這個方法。

擴展TextRange對象的內容，請使用expand方法以實現它。

利用offsetLeftc以及offsetTop屬性，可以得到該TextRange對象的坐標。不能取得該元素以及一個TextRamge對象用開始點和結束點定義的偏移。

如果你要取得一個TextRange對象的矩形邊界，請使用boundingLeft、boundingTop、boundWidth以及boundingHeight屬性。

如果你要取得一個TextRange對象的準確形狀，請使用getClientRects方法。它將取得一個TextRectangles集合，包含了幾個TextRectangle對象。每個TextRectangle對象代表屬于這個TextRange對象的一行文本。

上面的提到所有的坐標都是相對于瀏覽器窗口的左上角的。

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

這個包含了整個TextRange對象的元素，如果你想要取得它在DOM層次結構中元素的深度，請使用parentElement方法。

  
一個Range對象是用開始點和結束點定義的。一個元素以及一個位置定義了一個點。如果這個元素只有文本內容（TextNode、CDATASection或者CommentNode），這個位置指定了元素中的一個字符位置；如果這個元素并非只有文本內容，這個位置指定了元素中一個子元素的序號索引。

  
和(endContainer,endOffset)屬性指定了一個Range對象的開始點和結束點。startOffset屬性指定在這個startContainer元素中Range開始的位置。endOffset屬性指定了在這個endContainer元素中Range結束的位置。

  
如果你想取得包含了整個Range對象的元素在DOM層次結構中節點的深度，請使用commonAncestorContainer屬性。

當一個TextRange的開始點和結束點是同一個位置的時候，這個TextRange對象就是收縮的。你可以用多種方法來檢測它是否處于收縮狀態。比如說，用TextRange對象的文本內容來檢測。用text屬性可取得一個TextRange對象的文本內容，并作為字符串來對待。如果這個text屬性代表的字符串的長度返回0，則TextRange對象是收縮的。

  
使用collapsed方法可以檢測Range對象是否處于收縮狀態。

比較兩個TextRange對象的定位，可以使用compareEndPoints方法。它比較了這些對象的邊界點。

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

  
兩個Range對象的定位可以通過compareboundaryPoint方法來比較。它比較了這些對象的邊界，類似于TextRange對象中的compareEndPoints方法。

  
請注意，雖然compareboundaryPoints方法和compareEndPoints方法的語法是相似的，但是同樣的案例，在不同的瀏覽器中，它們的行為是不同的。請閱讀這兩個方法的頁面以了解詳細區別。

  
如果你想檢測一個點（一個(element,position)對，其中position指定了element內部的一個索引或者說一個字符位置）是否位于一個Range內部，請使用comparePoint或者isPointInRange方法。

text屬性能夠設置或取得一個TextRange對象的文本內容，作為一個字符串。

如果你需要HTML格式的內容，請使用htmlText屬性。

如果要替換一個帶有HTML格式文本的TextRange對象的內容，請使用pasteHTML方法。你還可以用這個方法來刪除這些內容（只需要在調用pasteHTML時用空字符串作為參數。）

  
toString方法取得一個Range對象的文本內容，作為一個字符串。
  
  
如果你需要以層次結構DOM的形式取得一個Range對象的內容，請使用cloneContents方法和extractContents方法。這兩個方法會從Range內容中建立一個DocumentFragment對象。
  
要想從document中移除一個Range對象的內容，請使用deleteContents方法。
  
要想向Range對象中插入一個新元素，請使用insertNode方法。
  

直接調用TextRange對象的select方法（多文本選區中這個方法不可用）。
> 首先調用window.getSelection方法來接收一個從屬于當前選區的selectionRange對象。如果你想給當前選區 添加一個Range的內容，直接調用addRange方法就可以把這個Range對象添加到selectionRange對象中。如果你只想要一個被選中的Range的內容，在調用addRange方法加入這個Range對象之前，先調用selectionRange對象的removeAllRanges方法。

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

用getBookmark方法，可以把一個TextRange對象保存為bookmark。之后可以用moveToBookmark方法創建一個TextRange對象。該bookmark，以及這個用moveToBookmark方法創建的TextRange對象與被保存的那個TextRange對象是完全相同的。

用下面的方法可以訪問textRange對象：

selection.createRange()

object.createTextRange()

TextRanges.item(index)

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

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

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!