理解Selection對象
Selection對象的屬性如下：
var selection = window.getSelection();
console.log(selection);
通過上面的代碼在控制台查看；
anchorNode: {node} 節點； 包含了用戶選取內容的起點的節點。
anchorOffset {int} 整型值： 用戶選取內容的起點與anchorNode屬性值所返回的節點的起點之間的距離。
focusNode {node} 節點： 包含了用戶選取內容的終點的節點。
focusOffset {int} 整型值： 用戶選取內容的終點與focusNode屬性值所返回的節點終點之間的距離。
isCollapsed {Boolean} 布爾型 當屬性值為true，表示用戶選取的內容的起點與終點位於相同的位置。
rangeCount {int} 整型值，表示用戶選取內容中包含多少個Range對象。
Selection對象的方法
1 理解使用 addRange方法，removeAllRanges方法與removeRange方法。
removeAllRanges： 該方法用於將用戶當前選取的所有內容設定為非選取狀態，使用方法如下：
selection.removeAllRanges();
下面使用一個demo來理解下該方法的含義，頁面上有一個div，div里面有一些文字，還有一個 "取消選取"的按鈕，用戶選取頁面上的一些內容后，單擊 "取消選擇"按鈕時
將會取消對這些內容的選取。代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div>adsasddsadsaads</div> <button onclick="removeAllRanges()">取消選擇</button> <button>一般的按鈕點擊看效果沒有反應--對比下</button> <script> function removeAllRanges() { var selection = window.getSelection(); selection.removeAllRanges(); } </script> </body> </html>
addRange: 該方法用於將一個Range對象添加到Selection對象中，該Range對象中所包含的內容將變為高亮選取狀態。
在firefox中：用戶可以按住ctrl鍵的方法同時選取多個不連續區域，因此可以使用selection對象中的addRange方法，在Selection對象中添加多個Range對象。
在chrome，safari及IE9中，一次只能選取一個連續區域，因此只能添加一個Range對象。
使用代碼如下：
selection.addRange(rangeObj);
該參數的含義是：需要被添加到Selection對象中的Range對象。
demo如下：頁面上有2個div元素，div元素中有一些文字，和一個 "選取第一個文字"的按鈕，用戶可以通過單擊 "選取第一行文字" 按鈕來使第一行文字處於高亮選取狀態，
頁面上還有二個按鈕，一個按鈕為 "取消選擇文字" 和 “選中第一行文字中第二個到第四個文字” 按鈕，為了更好的對比，可以查看效果；
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div id="firstLine">第一行文字</div> <div>第二行文字</div> <button onclick="selectFirstLine()">選擇第一行文字</button> <button onclick="removeAllRanges()">取消選擇文字</button> <button onclick="selectContent()">選中第一行文字中第二個到第四個文字</button> <script> function selectFirstLine() { var firstLine = document.getElementById("firstLine"); var selection = window.getSelection(); var rangeObj = document.createRange(); rangeObj.selectNodeContents(firstLine); // 所有內容變為非選取狀態 selection.removeAllRanges(); // 然后自動選取某個區域 selection.addRange(rangeObj); } function removeAllRanges() { var selection = window.getSelection(); selection.removeAllRanges(); } function selectContent() { var firstLine = document.getElementById("firstLine"); var textNode = firstLine.firstChild; var selection = window.getSelection(); var rangeObj = document.createRange(); rangeObj.setStart(textNode, 1); rangeObj.setEnd(textNode, 3); // 所有內容變為非選取狀態 selection.removeAllRanges(); // 然后自動選取某個區域 selection.addRange(rangeObj); console.log(selection.toString()); // 打印第二個到第四個文字 } </script> </body> </html>
removeRange: 該方法用於從Selection對象中移除一個指定的Range對象，該Range對象中所包含的內容將從高亮選取狀態變為非選取狀態。
使用方法如下：
selection.removeRange(rangeObj);
使用方法類似 removeAllRanges()
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div id="firstLine">第一行文字</div> <div>第二行文字</div> <button onclick="selectFirstLine()">選取第一行文字</button> <button onclick="unselect()">取消選擇</button> <script> var rangeObj; function selectFirstLine() { var firstLine = document.getElementById("firstLine"); var selection = window.getSelection(); rangeObj = document.createRange(); rangeObj.selectNodeContents(firstLine); selection.removeAllRanges(); selection.addRange(rangeObj); } function unselect() { var selection = window.getSelection(); if (selection.rangeCount > 0) { selection.removeRange(rangeObj); } } </script> </body> </html>
2. 理解使用 collapse方法，collapseToStart方法與collapseToEnd方法
collapse: Selection對象的collapse 方法用於將用戶當選取范圍的起點與終點移動到一個指定位置，使用戶選取范圍內不包括任何內容。
簡單的理解就是不讓用戶選取內容。
使用方法如下：
selection.collapse(parentNode, num);
參數 parentNode 含義是：指定位置的節點。
參數num的含義是：{int}整型值；
當第一個參數parentNode節點為內容時，該參數值用於指定將第幾個文字的結束位置作為collapse方法所使用的指定位置。
當第一個參數parentNode節點中包括其他子節點時，該參數值用於指定將第幾個子節點的結束位置作為collapse方法使用的指定位置。
下面是一個demo，頁面上有一個div元素有一些文字內容，每次用戶用鼠標選取div元素中的文字時，當鼠標左鍵被松開時使用Selection對象的
collapse方法取消用戶選取的文字，使用戶永遠無法選取div元素中的文字。
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div onmouseup="unSelect()" contenteditable="true" style="width:400px;background-color: #e0f0d0;">adasadsdasdsadsa</div> <script> function unSelect() { var selection = window.getSelection(); selection.collapse(selection.anchorNode, selection.anchorOffset); } </script> </body> </html>
collapseToStart：將用戶當前選取范圍的終點移動到起點，使用戶選取范圍內不包含任何內容。
該方法和上面的collapse方法還是有區別的，雖然也是不選中任何內容，但是光標的位置變了，選取某一段文字后的終點文字會為作為光標的起點位置；
使用方式如下：
selection.collapseToStart();
下面是一個demo，頁面上有一個div元素，包含一些文字，每次用戶鼠標選取div元素中的文字時，當鼠標左鍵被松開時，使用Selection對象的collapseToStart方法
取消用戶選取的文字，使用戶用於無法選取div元素中的文字，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div onmouseup="unSelect()" contenteditable="true" style="width:400px;background-color: #e0f0d0;">adasadsdasdsadsa</div> <script> function unSelect() { var selection = window.getSelection(); selection.collapseToStart(); } </script> </body> </html>
collapseToEnd：用於將用戶當前選取范圍的起點移動到終點處，使用戶選取范圍內不包括任何內容。
該方法的光標永遠在選取的文字的最后。
使用方法如下所示：
selection.collapseToEnd();
下面是一個demo，頁面上顯示一個div元素，div元素中顯示一些文字，每次用戶鼠標選取div元素中的文字，當鼠標左鍵被松開時，使用Selection對象的collapseToEnd方法取消用戶選取的文字，使用戶永遠無法選取div元素中的文字。
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div onmouseup="unSelect()" contenteditable="true" style="width:400px;background-color: #e0f0d0;">adasadsdasdsadsa</div> <script> function unSelect() { var selection = window.getSelection(); selection.collapseToEnd(); } </script> </body> </html>
3. 理解使用 deleteFromDocument方法
該方法用於將用戶選取的內容從頁面中刪除，使用方法如下所示：
selection.deleteFromDocument();
下面是一個demo，來理解下該方法的使用；頁面上有一個div元素，div元素中顯示一些文字，每次用戶使用鼠標選取div元素中的文字，當鼠標左鍵被松開時，使用Selection對象的deleteFromDocument方法可以將用戶選取的文字從頁面中刪除。
代碼如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div onmouseup="removeSelection()" contenteditable="true" style="width:400px;background-color: #e0f0d0;">adasadsdasdsadsa</div> <script> function removeSelection() { var selection = window.getSelection(); selection.deleteFromDocument(); } </script> </body> </html>
4. 理解使用extend方法
該方法用於將用戶選取范圍的終點移動到指定位置。
使用方法如下：
selection.extend(focusNode, focusOffset);
參數focusNode代表指定位置所在的節點。
參數focusOffset 為一個整型值；當第一個參數focusNode所代表的節點是文字內容時，該參數值用於指定將第幾個文字的結束位置作為用戶選取范圍的終點。
當第一個參數focusNode所代表節點中包括其他子節點時，該參數值用於指定將第幾個子節點的結束位置作為用戶選取范圍的終點。
下面來看一個demo，演示下該方法的含義：
頁面上有一個div元素，該元素內有一些文字，每次用戶鼠標選取div元素中的文字，當鼠標左鍵被松開時，使用selection對象的extend方法將div元素中的剩余文字設定為高亮選取狀態。
如下代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div onmouseup="extend()" contenteditable="true" style="width:400px;background-color: red">asdsddsawwwdwassdxcdff</div> <script> function extend() { var selection = window.getSelection(); if (!selection.isCollapsed) { // selection.isCollapsed 當屬性值為true，表示用戶選取的內容的起點與終點位於相同的位置 if (selection.focusNode.nodeType == Node.TEXT_NODE) { // 如果選取內容在一個文字節點內 var selRange = selection.getRangeAt(0); // 如果用戶鼠標反向選取頁面內容 if (selRange.startContainer == selection.focusNode && selRange.startOffset == selection.focusOffset) { selection.extend(selection.focusNode, 0); } else { // 如果用戶鼠標正向選取頁面內容 selection.extend(selection.focusNode, selection.focusNode.textContent.length); } } } } </script> </body> </html>
5. 理解使用selectAllChildren 方法
該方法用於取消當前用戶選取內容，並且選取某個指定元素中的全部子元素。
使用方法如下：
selection.selectAllChildren(element);
如下demo
頁面上有一個div元素，div元素中有一些文字，和一個 "選取元素"按鈕，用戶單擊 "選取元素" 按鈕時通過selection對象的selectAllChildren方法將div元素中的
全部文字設定為選取狀態。
如下代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div id="myDiv">單擊“選取元素”按鈕將選取div元素中的全部文字</div> <button onclick="selectContents()">選取元素</button> <script> function selectContents() { var elementNode = document.getElementById("myDiv"); var selection = window.getSelection(); selection.selectAllChildren(elementNode); } </script> </body> </html>
6. toString方法
該方法和Range對象的toString方法類似，Selection對象的toString方法用於獲取用戶選取范圍內的全部文字內容。使用方法如下：
selection.toString();
請看如下demo，頁面上有一個div元素和一個顯示內容的按鈕，用戶單擊 顯示內容 按鈕時 在彈出的提示信息窗口中會顯示用戶選取的全部文字。如下代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <div id="myDiv" style="color: red">adssdsdasdadsadsds</div> <button onclick="selectText()">顯示內容</button> <script> function selectText() { var selRange = window.getSelection(); alert(selRange.toString()); } </script> </body> </html>