理解Selection物件

龍恩0707發表於2017-08-19
物件

理解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>

檢視效果

相關文章