JavaScript標準Selection操做

• 簡介
• 術語
• 屬性
• 方法
• 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能夠。