前言

有些時候我們需要能夠通過JavaScript訪問頁面的當前選擇，已達成選擇（取消選擇）部分節(jié)點以從文檔中刪除所選內容或像文檔中插入某些新內容。我們需要Range和Selction對象已達成我們的目的。

Range

選擇的基本概念是Range，其本質是一對‘邊界點’：范圍起點和范圍終點

我們可以通過Range對象來操作選擇

    // 可以不傳任何參數創(chuàng)建Range對象
    let range = new Range()
    
    // 可以通過設置開始和結束邊界點來進行選擇
    // 指定開始點
    range.setStart(node, offset)
    // 指定最大范圍但不包括offset
    range.setEnd(node, offset)

選擇部分文本

setStart和setEnd方法的第一個參數node可以是文本節(jié)點也可以是元素節(jié)點

當node是文本節(jié)點時，offset則必須是其文本中的位置

<p id="p">Hello</p> 
<script> 
let range = new Range(); 
range.setStart(p.firstChild, 2); 
range.setEnd(p.firstChild, 4); 
</script>

選擇dom元素節(jié)點

當node是元素節(jié)點時，offset則必須是子元素的索引編號

當我們有如下dom結構并且以p為node節(jié)點時，對應的offset如圖所示

<p>Test: <i>test1</i> and <b>test2</b> </p>
   | 0   |   1      | 2  |     3     |

range對象屬性

我們在上面的示例中創(chuàng)建的 range 對象具有以下屬性：

startContainer，startOffset —— 起始節(jié)點和偏移量，

endContainer，endOffset —— 結束節(jié)點和偏移量，

collapsed —— 布爾值，如果范圍在同一點上開始和結束（所以范圍內沒有內容）則為 true，

commonAncestorContainer —— 在范圍內的所有節(jié)點中最近的共同祖先節(jié)點，

編輯范圍的方法

deleteContents() —— 從文檔中刪除范圍中的內容

extractContents() —— 從文檔中刪除范圍中的內容，并將刪除的內容作為 DocumentFragment 返回

cloneContents() —— 復制范圍中的內容，并將復制的內容作為 DocumentFragment 返回

insertNode(node) —— 在范圍的起始處將 node 插入文檔

surroundContents(node) —— 使用 node 將所選范圍中的內容包裹起來。要使此操作有效，則該范圍必須包含其中所有元素的開始和結束標簽：不能像 <i>abc 這樣的部分范圍。

更多API

更多API及詳細參數見 MDN Range

Selection

Range是用來管理選擇范圍的通用對象，但是新建一個Range對象并不一定會在文檔上創(chuàng)建一個選擇。 Selection對象是用來獲取文檔選擇的。可以通過winodw.getSelection()或document.getSelection()來獲取。一個選擇可以包括零個或多個范圍，但實際上除firefox允許同時選擇多個范圍，其他瀏覽器最多只能選擇一個范圍。

selection的屬性

如前所述，理論上一個選擇可能包含多個范圍。我們可以使用下面這個方法獲取這些范圍對象：

getRangeAt(i) —— 獲取第 i 個范圍，i 從 0 開始。在除 Firefox 之外的所有瀏覽器中，僅使用 0。

與范圍類似，選擇的起點被稱為“錨點（anchor）”，終點被稱為“焦點（focus）”。

主要的選擇屬性有：

anchorNode —— 選擇的起始節(jié)點，

anchorOffset —— 選擇開始的 anchorNode 中的偏移量，

focusNode —— 選擇的結束節(jié)點，

focusOffset —— 選擇開始處 focusNode 的偏移量，

isCollapsed —— 如果未選擇任何內容（空范圍）或不存在，則為 true 。

rangeCount —— 選擇中的范圍數，除 Firefox 外，其他瀏覽器最多為 1。

selection錨點和焦點與range開始結束點的區(qū)別

selection的錨點可在選擇的焦點之后，以表達從右向左選擇，而range的開始點必須在結束點之前

selection API

更多詳細API及其參數見 MDN Selection

以上就是Selection與Range 對象操作示例指南的詳細內容，更多關于Selection Range 對象操作的資料請關注腳本之家其它相關文章！

最新評論