說明：用戶可以通過在頁面上選擇一段文字來創建選中區（即Selection對象），如果需要對選中區進行修改，比如：增加一個節點或是添加一段文字，這個時候就需要使用腳本操作Selection對象和Range對象來實現。
一、什麼是
1、什麼是Selection對象？
每一個瀏覽器窗口都有一個Selection對象，代表用戶鼠標在頁面中所選取的區域。可以通過如下代碼得到一個Selection對象：
var selection = window.getSelection();
// IE瀏覽器
var selection = document.selection;
2、什麼是Range對象
一個Range對象代表頁面上的一段連續區域。可以通過如下代碼創建一個空的Range對象：
// IE瀏覽器
var range = document.selection.createRange();
3、關係
每一個Selection對象都有一個或多個Range對象，每一個Range對象代表用戶用鼠標所選取範圍內的一段連續區域。
在firefox瀏覽器中，用戶可以通過按住 ctrl 鍵來選取頁面上的多個區域，因此一個Selection對象可能有多個Range對象。
在chrome或safari瀏覽器中，用戶每次只能選取一段區域，所以一個Selection對象中只能有一個Range對象。
二、Selection對象
1、屬性
| 屬性 | 描述 |
|---|---|
| rangeCount | 返回該選區所包含的連續範圍的數量。(在Chrome瀏覽器中只能有一個選區存在) |
| isCollapsed | 返回一個布爾值，用於判斷選區的起始點和終點是否在同一個位置。(也就是說可以用來判斷是範圍選取還是單個焦點) |
| anchorNode | 返回該選區起點所在的節點（Node） |
| anchorOffset | 返回一個數字，其表示的是選區起點在 anchorNode 中的位置偏移量。 如果 anchorNode 是文字節點，那麼返回的就是從該文字節點的第一個字開始，直到被選中的第一個字之間的字數（如果第一個字就被選中，那麼偏移量爲零）。 如果 anchorNode 是一個元素，那麼返回的就是在選區第一個節點之前的同級節點總數。(這些節點都是 anchorNode 的子節點) |
| focusNode | 返回該選區終點所在的節點。 |
| focusOffset | 返回一個數字，其表示的是選區終點在 focusNode 中的位置偏移量。 如果 focusNode 是文字節點，那麼選區末尾未被選中的第一個字，在該文字節點中是第幾個字（從0開始計），就返回它。 如果 focusNode 是一個元素，那麼返回的就是在選區末尾之後第一個節點之前的同級節點總數。 |
2、方法
| 方法 | 描述 |
|---|---|
| getRangeAt(rangeIndex) | 獲取當前selection對象下的range對象。rangeIndex 代表range對象的序號，在chrome或safari中，用戶每次只能選取一段區域，因此該值只能爲0。 |
| addRange(range) | 向選區中添加一個區域 |
| removeRange(range) | 刪除一個區域 |
| removeAllRanges() | 刪除所有區域 |
| deleteFromDocument() | 將選區範圍內的文檔片段直接刪除 |
| selectAllChildren(node) | 將一個節點的所有子節點包含進範圍選區 |
| containsNode(aNode,aPartlyContained) | 判斷某一個node是否爲當前選區的一部分。 aNode：用於判斷是否包含在Selection中的那個節點； aPartlyContained：爲true時, 當selection包含節點aNode的一部分或全部時，containsNode()返回true；爲false時, 只有當selection完全包含節點aNode時，containsNode() 才返回true。 |
| modify(alter,direction,granularity) | 操作擴展當前選區。alter：改變類型. 傳入"move"來移動光標位置，或者"extend"來擴展當前選區；direction：調整選區的方向。你可以傳入"forward"或"backward"來根據選區內容的語言書寫方向來調整。或者使用"left"或"right"來指明一個明確的調整方向；granularity：調整的距離顆粒度。可選值有"character"、“word”、“sentence”、“line”、“paragraph”、“lineboundary”、“sentenceboundary”、“paragraphboundary”、“documentboundary”。 |
| toString() | 返回當前選區的純文本內容。 |
| collapseToStart() | 此方法的作用是取消當前選區，並把光標定位在原選區的最開始處，如果此時光標所處的位置是可編輯的，且它獲得了焦點，則光標會在原地閃爍。 |
| collapseToEnd() | 同上至結尾處 |
| collapse(parentNode, offset) | 將範圍選區摺疊爲一個點。parentNode：光標落在的目標節點；offset：焦點偏移量。 |
| extend(node,offset) | 將選區的焦點移動到一個特定的位置。node：焦點會被移至此節點內。offset：可選，焦點會被移至 node 內的偏移位置。如果沒有指定，使用 0 作爲默認值。 |
三、Range對象
1、屬性
| 屬性 | 描述 |
|---|---|
| text | 獲取選定的文本。只在IE瀏覽器生效 |
| htmlText | 獲取選定的html。只在IE瀏覽器生效 |
| collapsed | 用於判斷Range對象所代表的區域的開始點和結束點是否位於相同的位置，如果相同該屬性值爲true。 |
| commonAncestorContainer | (node) 返回Range對象所代表的區域位於什麼節點之中。 |
| endContainer | (node) 用於返回Range對象所代表的區域的終點位於什麼節點之中。 |
| endOffset | (int) 用於返回Range對象所代表區域的終點與包含該終點的節點起點之間的距離。 |
| startContainer | (node) 用於返回Range對象所代表區域的起點位於什麼節點之中。 |
| startOffset | (int) 用於返回Range對象所代表的區域的起點與包含該起點節點的起點之間的距離。 |
2、方法
| 方法 | 描述 |
|---|---|
| selectNode(node) | 用於將Range對象的起點指定爲某個節點的起點，將Range對象的終點指定爲該節點的終點。Range對象所代表的區域包含該節點。 |
| selectNodeContents(node) | 用於將Range對象的起點指定爲某個節點中的所有內容的起點，將Range對象的終點指定爲該節點所有內容的終點，也就是說使Range對象所代表的區域包含該節點的所有內容，但是不包括該節點標籤本身。 |
| deleteContents() | 用於將Range對象中所包含的內容從頁面中刪除。 |
| cloneRange() | 用於對當前的Range對象進行復制，該方法返回複製的Range對象。 |
| cloneContents() | 該方法返回的是一個複製的 DocumentFragment 對象，該對象爲一個容器元素，當需要追加，修改，刪除或查找頁面上的元素時，該方法非常有用。 |
| extraContents() | 用於將Range對象所代表區域的HTML代碼克隆到一個 DocumentFragment 中，然後從頁面中刪除這段HTML代碼。 |
| insertNode(node) | 用於將指定的節點插入到某個Range對象所代表的區域中，插入位置爲Range對象所代表區域的起點位置，如果該節點已經存在於頁面之中，那麼該節點將被移動到Range對象所代表區域的起點處。 |
| collapse(toStart) | toStart，是一個Boolean類型。1、false，表示將Range對象所代表的區域的起點移動到終點處； 2、true，表示將Range對象所代表的區域的終點移動到該區域的起點處。 |
| detach() | 用於從瀏覽器中釋放Range對象，釋放之後將不能再訪問該Range對象，否則將拋出腳本錯誤。 |
| setStart(node, num) | 用於將某個節點中的某個位置指定爲Range對象所代表區域的起點位置。num：是一個整型數值，有兩種含義取決於node節點；1、當第一個參數node所代表的節點是一個內容爲一段文字的時候，那麼該參數值用於指定將第幾個文字結束位置作爲Range對象所代表區域的起點位置(num是從0開始)； 2、當第一個參數node所代表的節點包括其他子節點時，該參數用於指定將第幾個子節點的結束位置作爲Range對象所代表區域的起點位置。 |
| setEnd(node, num) | 用於將某個節點中的某處位置指定爲Range對象所代表區域的結束位置。num 含義同上↑ |
| setStartBefore(node) | 用於將某個節點的起始位置指定爲Range對象所代表區域的起點位置。 |
| setStartAfter(node) | 用於將某個節點的終點位置指定爲Range對象所代表區域的起點位置。 |
| setEndBefore(node) | 用於將某個節點的起始位置指定爲Range對象所代表區域的終點位置。 |
| setEndAfter(node) | 用於將某個節點的終點位置指定爲Range對象所代表區域的終點位置。 |