標籤：
- 簡介
- 術語
- 屬性
- 方法
- document.activeElement
- document.designMode = ‘on‘;
簡介
selection是對當前啟用選中區（即高亮文本）進行操作。
在非IE瀏覽器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()獲得selection對象，本文講述的是標準的selection操作方法。文中絕大部分內容來自 https://developer.mozilla.org/en/DOM/Selection
術語
以下幾個名詞是英文文檔中的幾個名詞。
-
anchor
-
選中地區的“起點”。
-
focus
-
選中地區的“結束點”。
-
range
-
是一種fragment(HTML片斷)，它包含了節點或文本節點的一部分。一般情況下，同一時刻頁面中只可能有一個range，也有可能是多個range（使用Ctrl健進行多選，不過有的瀏覽器不允許，例如Chrome）。可以從selection中獲得range對象，也可以使用document.createRange()方法獲得。
屬性
-
anchorNode
-
返回包含“起點”的節點。
-
anchorOffset
-
“起點”在anchorNode中的位移量。
-
focusNode
-
返回包含“結束點”的節點。
-
focusOffset
-
“結束點”在focusNode中的位移量。
-
isCollapsed
-
“起點”和“結束點”是否重合。
-
rangeCount
-
返回selection中包含的range對象的數目，一般存在一個range，Ctrl健配合使用可以有多個。
方法
-
getRangeAt(index)
-
從當前selection對象中獲得一個range對象。
index：參考rangeCount屬性。
返回：根據下標index返回相應的range對象。
-
collapse(parentNode, offset)
-
將開始點和結束點合并到指定節點（parentNode）的相應（offset）位置。
parentNode：焦點（插入符）將會在此節點內。
offset： 取值範圍應當是[0, 1, 2, 3, parentNode.childNodes.length]。
- 0：定位到第一個子節點前。
- 1：第二個子節點前。
- ……
- childNodes.length-1：最後一個子節點前。
- childNodes.length：最後一個子節點後。
Mozilla官方文檔 中講到取值為0和1，經測試不準確。文檔中還有一句不是十分清楚“The document is not modified. If the content is focused and editable, the caret will blink there.”
-
extend(parentNode, offset)
-
將“結束點”移動到指定節點（parentNode）的指定位置（offset）。
“起點”不會移動，新的selection是從“起點”到“結束點”的地區，與方向無關（新的“結束點”可以在原“起點”的前面）。
parentNode：焦點將會在此節點內。
Offset：1，parentNode的最後；0，parentNode的最前。
-
modify(alter, direction, granularity)
-
改變焦點的位置，或擴充|縮小selection的大小
alter：改變的方式。”move”，用於移動焦點；”extend”，用於改變selection。
direction：移動的方向。可選值forward | backword或left | right
granularity：移動的單位或尺寸。可選值，character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary"。
Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1才會支援此函數， 官方文檔：https://developer.mozilla.org/en/DOM/Selection/modify
-
collapseToStart()
-
將“結束點”移動到，selction的“起點”，多個range時也是如此。
-
collapseToEnd()
-
將“起點”移動到，selction的“結束點”，多個range時也是如此。
-
selectAllChildren(parentNode)
-
將parentNode的所有後代節點（parentNode除外）變為selection，頁面中原來的selection將被拋棄。
-
addRange(range)
-
將range添加到selection當中，所以一個selection中可以有多個range。
注意Chrome不允許同時存在多個range，它的處理方式和Firefox有些不同。
-
removeRange(range)
-
從當前selection移除range對象，傳回值undefined。
Chrome目前沒有改函數，即便是在Firefox中如果用自己建立（document.createRange()）的range作為參數也會報錯。
如果用oSelction.getRangeAt()取到的，則不會報錯。
-
removeAllRanges()
-
移除selection中所有的range對象，執行後anchorNode、focusNode被設定為null，不存在任何被選中的內容。
-
toString()
-
返回selection的純文字，不包含標籤。
-
containsNode(aNode, aPartlyContained)
-
判斷一個節點是否是selction的一部分。
aNode：要驗證的節點。
aPartlyContained：true，只要aNode有一部分屬於selection就返回true；false，aNode必須全部屬於selection時才返回true。
document.activeElement
該屬性屬於HTML5中的一部分，它返回當前獲得焦點的元素，如果不存在則返回“body”。一般情況下返回的是“文本域”或“文字框”。也有可能返回“下拉式清單”、“按鈕”、“單選”或“多選按鈕”等等，Mac OS系統中可能不會返回非輸入性元素（textbox，例如文字框、文本域）。
相關屬性和方法：
-
selectionStart
-
輸入性元素selection起點的位置，可讀寫。
-
selectionEnd
-
輸入性元素selection結束點的位置，可讀寫。
-
setSelectionRange(start, end)
-
設定輸入性元素selectionStart和selectionEnd值
- 如果textbox沒有selection時，selectionStart和selectionEnd相等，都是焦點的位置。
- 在使用setSelectionRange()時
如果end小於start，會講selectionStart和selectionEnd都設定為end；
如果start和end參數大於textbox內容的長度（textbox.value.length），start和end都會設定為value屬性的長度。
- 值得一提的是selectionStart和selectionEnd會記錄元素最後一次selection的相關屬性，意思就是當元素失去焦點後，使用selectionStart和selectionEnd仍能夠擷取到元素失去焦點時的值。這個特性可能會對製作“插入表情”時十分有用（將表情插入到元素最後一次焦點的位置）。
<textarea id="textbox">abc中國efg</textarea> <script type="text/javascript"> window.onload = function(){ var textbox = document.getElementById(‘textbox‘); textbox.setSelectionRange(5, 2); console.log(textbox.selectionStart); // 2 console.log(textbox.selectionEnd); // 2 }; </script>
<textarea id="textbox">abc中國efg</textarea> <script type="text/javascript"> window.onload = function(){ var textbox = document.getElementById(‘textbox‘); textbox.setSelectionRange(9, 9); console.log(textbox.selectionStart); // 8 console.log(textbox.selectionEnd); // 8 }; </script>
支護性：ie6\7\8不支援；Chrome、Firefox、Opera、Safari都支援。
參考文檔：https://developer.mozilla.org/en/DOM/document.activeElement
document.designMode = ‘on‘;
當document.designMode = ‘on‘時selection的方法、selectionStart、selectionEnd在Firefox和Opera中不可以使用，但Chrome和Safari可以。
JavaScript標準Selection操作
