轉自：https://blog.csdn.net/weixin_42420703/article/details/84892528
文章目錄
selection對象
術語
屬性
方法
window.getSelection()，返回一個Selection對象，表示用戶選擇的文本范圍或光標的當前位置。
selection對象
先來看下面兩個selection結果：
selection對象一：
selection對象二：
很奇怪，為什么同樣選中一段文字，為什么selection對象的屬性會不一樣呢？
那就需要明確一下Selection對象的各個屬性的意義了。
術語
錨點（anchor）
錨指的是一個選區的起始點。當我們使用鼠標選擇一個區域的時候，錨點就是我們鼠標按下瞬間的那個點。在用戶拖動鼠標時，錨點是不會變的。
焦點（focus）
選區的焦點是該選區的終點，當您用鼠標框選一個選區的時候，焦點是你的鼠標松開瞬間所記錄的那個點。隨着用戶拖動鼠標，焦點的位置會隨着改變。
范圍（range）
范圍指的是文檔中連續的一部分。一個范圍包括整個節點，也可以包含節點的一部分，例如文本節點的一部分。用戶通常下只能選擇一個范圍。“范圍”會被作為range對象返回。Range對象也能通過DOM創建、增加、刪減。
屬性
anchorNode
返回該選區起點所在的節點
anchorOffset
返回一個數字，表示該選區起點在anchorNode中的位置偏移量。
如果 anchorNode 是文字節點，那么返回的就是從該文字節點的第一個字開始，直到被選中的第一個字之間的字數（如果第一個字就被選中，那么偏移量為零）
如果 anchorNode 是一個元素，那么返回的就是在選區第一個節點之前的同級節點總數。(這些節點都是 anchorNode 的子節點)
focusNode
返回該選區終點所在的節點。
focusOffset
返回一個數字，表示該選區終點在focusNode中的位置偏移量。
如果 focusNode 是文字節點，那么選區末尾未被選中的第一個字，在該文字節點中是第幾個字（從0開始計），就返回它。
如果 focusNode 是一個元素，那么返回的就是在選區末尾之后第一個節點之前的同級節點總數。
isCollapsed
返回一個布爾值，用於判斷選區的起始點和終點是否在同一位置。
rangeCount
返回一個數字，表示該選區所包含的連續范圍的數量。一般為1，因為通常情況下用戶只能選擇一個范圍。
方法
getRangeAt
返回選區開始的節點（Node）。
因為通常情況下用戶只能選擇一個范圍，所以只有一個選區（range），此方法一般為getRangeAt(0)
collapse(光標落在的目標節點, offset)
將當前的選區折疊為一個點
extend
將選區的焦點移動到一個特定的位置。
modify
修改當前的選區。
collapseToStart
將當前的選區折疊到起始點。
collapseToEnd
將當前的選區折疊到最末尾的一個點。
selectAllChildren
將某一指定節點的子節點框入選區
addRange
一個區域（Range）對象將被加入選區。
removeRange
從選區中移除一個區域。
removeAllRanges
將所有的區域都從選區中移除。
deleteFromDocument
從頁面中刪除選區中的內容。
selectionLanguageChange
當鍵盤的朝向發生改變后修改指針的Bidi優先級。
toString
返回當前選區的純文本內容。
containsNode
判斷某一個node是否為當前選區的一部分。
所以現在就可以明白為什么同樣選中一段文字，Selection對象不一樣了吧？
用戶可能從左到右（與文檔方向相同）選擇文本或從右到左（與文檔方向相反）選擇文本。anchor指向用戶開始選擇的地方，而focus指向用戶結束選擇的地方。
————————————————
版權聲明：本文為CSDN博主「xiao xu」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42420703/article/details/84892528