前言

有些時(shí)候我們需要能夠通過(guò)JavaScript訪問(wèn)頁(yè)面的當(dāng)前選擇，已達(dá)成選擇（取消選擇）部分節(jié)點(diǎn)以從文檔中刪除所選內(nèi)容或像文檔中插入某些新內(nèi)容。我們需要Range和Selction對(duì)象已達(dá)成我們的目的。

Range

選擇的基本概念是Range，其本質(zhì)是一對(duì)‘邊界點(diǎn)’：范圍起點(diǎn)和范圍終點(diǎn)

我們可以通過(guò)Range對(duì)象來(lái)操作選擇

    // 可以不傳任何參數(shù)創(chuàng)建Range對(duì)象
    let range = new Range()
    
    // 可以通過(guò)設(shè)置開(kāi)始和結(jié)束邊界點(diǎn)來(lái)進(jìn)行選擇
    // 指定開(kāi)始點(diǎn)
    range.setStart(node, offset)
    // 指定最大范圍但不包括offset
    range.setEnd(node, offset)

選擇部分文本

setStart和setEnd方法的第一個(gè)參數(shù)node可以是文本節(jié)點(diǎn)也可以是元素節(jié)點(diǎn)

當(dāng)node是文本節(jié)點(diǎn)時(shí)，offset則必須是其文本中的位置

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

選擇dom元素節(jié)點(diǎn)

當(dāng)node是元素節(jié)點(diǎn)時(shí)，offset則必須是子元素的索引編號(hào)

當(dāng)我們有如下dom結(jié)構(gòu)并且以p為node節(jié)點(diǎn)時(shí)，對(duì)應(yīng)的offset如圖所示

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

range對(duì)象屬性

我們?cè)谏厦娴氖纠袆?chuàng)建的 range 對(duì)象具有以下屬性：

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

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

collapsed —— 布爾值，如果范圍在同一點(diǎn)上開(kāi)始和結(jié)束（所以范圍內(nèi)沒(méi)有內(nèi)容）則為 true，

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

編輯范圍的方法

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

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

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

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

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

更多API

更多API及詳細(xì)參數(shù)見(jiàn) MDN Range

Selection

Range是用來(lái)管理選擇范圍的通用對(duì)象，但是新建一個(gè)Range對(duì)象并不一定會(huì)在文檔上創(chuàng)建一個(gè)選擇。 Selection對(duì)象是用來(lái)獲取文檔選擇的?？梢酝ㄟ^(guò)winodw.getSelection()或document.getSelection()來(lái)獲取。一個(gè)選擇可以包括零個(gè)或多個(gè)范圍，但實(shí)際上除firefox允許同時(shí)選擇多個(gè)范圍，其他瀏覽器最多只能選擇一個(gè)范圍。

selection的屬性

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

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

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

主要的選擇屬性有：

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

anchorOffset —— 選擇開(kāi)始的 anchorNode 中的偏移量，

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

focusOffset —— 選擇開(kāi)始處 focusNode 的偏移量，

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

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

selection錨點(diǎn)和焦點(diǎn)與range開(kāi)始結(jié)束點(diǎn)的區(qū)別

selection的錨點(diǎn)可在選擇的焦點(diǎn)之后，以表達(dá)從右向左選擇，而range的開(kāi)始點(diǎn)必須在結(jié)束點(diǎn)之前

selection API

更多詳細(xì)API及其參數(shù)見(jiàn) MDN Selection

以上就是Selection與Range 對(duì)象操作示例指南的詳細(xì)內(nèi)容，更多關(guān)于Selection Range 對(duì)象操作的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！