selection對象代表當前激活選中區，通常是高亮的文本塊
創建選中區:
1.拖拽文本
2.腳本創建 cerateRange()
獲取selection對象
IE document.selection()
非IE window.getSelection()
eg:
<div>請選中這里的部分文字。</div>
<div>
<input type="button" value="加粗" onclick="select()" />
</div>
<script>
function select() {
var a = window.getSelection();
console.log(typeof a.anchorNode);
}
</script>
輸出Selection對象
屬性:
anchorNode：包含起點的節點，不存在則為null（注意一段文本就是一個節點！包括p內的文本，a，div等標簽內的文本，不包括輸入框內的文本！！）
anchorOffset：起點在anchorNode中的偏移量
focusNode：包含結束點的節點，不存在則為null
focusOffset：結束點在focusNode中的偏移量，focusOffset可以比anchorOffset小，只要從后向前選擇
isCollapsed：起點和結束點是否重合
rangeCount：selection中range的數目，一般一個，ctrl鍵配合多個
-------------------------------------------------------------------------------------------------------------------------------------
方法:
1.getRangeAt(index)
從當前selection中獲取某一個range對象
2.collapse(parentNode, offset)
將開始和結束點合並到parentNode的offset位置，多用於改變可編輯div的焦點，，，
3.extend(parentNode, offset)
將結束點移動到parentNode的offset位置
4.collapseToStart()
將結束點移動到selection的起點，注意是selection的起點而不是開始點，意味着只會向前不會向后，多用於取消選中狀態，多個range時也是如此
5.collapseToEnd()
將開始點移動到selection的結束點
6.selectAllChildren(parentNode)
將parentNode的所有后代變成selection，原有的selection被拋棄，可用於全選
7.addRange(range)
將range添加到selection中，注意chrome中只能有一個range
8.removeRange(range)
從selection中移除range
兼容性:不佳，親測只有IE可以
9.removeAllRanges()
移除所有的range，多用於取消選擇狀態
10.toString()
返回selection的純文本，也就是返回選中區域的文本內容
11.containsNode(aNode,aPartlyContained)
判斷一個節點是不是selection的一部分
aNode要判斷的節點
aPartlyContained true 只要有一部分屬於就返回true false 全部屬於才返回true
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
range對象:
屬性:
collapsed:此Range對象代表的區域開始點和結束點是否已合並
commonAncestorContainer:此Range對象代表的整體區域位於哪個節點(元素或一段文本)
startContainer:此Range對象的開始點位於哪個節點
startOffset:返回此Range對象代表的區域的起點在startContainer中的位置，返回整數
endContainer:此Range對象的結束點位於哪個節點
endOffset:返回此Range對象代表的區域的結束點在endContainer中的位置
方法:
document.createRange() 創建Range對象
Range初始化
selectNode(node) 選擇文檔的一部分
將整個node節點的信息，包括node本身填充進Range
selectNodeContents(node)
將整個弄的節點內的信息，不包括node本身，填充進Range
值得注意的是，用腳本創建Range不會像手動一樣使選中部分變藍！
操作Range
deleteContents()
從文檔中徹底刪除Range區域的內容
extractContants()
從文檔中提取Range區域的內容，返回值為提取的內容，可以對返回值進行操作，例如插入頁面其他地方
cloneRange()
復制Range區域
detach()
分類該區域
-----------------------------------------------------------------------------------------------------------------------
低版本IE兼容
創建Range (低版本IE只支持文本Range)
document.body.createRange()
初始化
findText(string)
找到第一次出現的給定文本，並將范圍移過來環繞文本。如果找到文本返回true，否則返回false.
eg: var a= document.body.createRange();
a.findText("選中此文本")；
alert(a.text);
高版本無需此法，不多解釋
詳情請看:http://www.cnblogs.com/zourong/p/4800922.html