Selection與Range 對(duì)象操作示例指南
前言
有些時(shí)候我們需要能夠通過JavaScript訪問頁面的當(dāng)前選擇,已達(dá)成選擇(取消選擇)部分節(jié)點(diǎn)以從文檔中刪除所選內(nèi)容或像文檔中插入某些新內(nèi)容。我們需要Range
和Selction
對(duì)象已達(dá)成我們的目的。
Range
選擇的基本概念是Range
,其本質(zhì)是一對(duì)‘邊界點(diǎn)’:范圍起點(diǎn)和范圍終點(diǎn)
我們可以通過Range對(duì)象來操作選擇
// 可以不傳任何參數(shù)創(chuàng)建Range對(duì)象 let range = new Range() // 可以通過設(shè)置開始和結(jié)束邊界點(diǎn)來進(jìn)行選擇 // 指定開始點(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)上開始和結(jié)束(所以范圍內(nè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)容包裹起來。要使此操作有效,則該范圍必須包含其中所有元素的開始和結(jié)束標(biāo)簽:不能像 <i>abc
這樣的部分范圍。
更多API
更多API及詳細(xì)參數(shù)見 MDN Range
Selection
Range
是用來管理選擇范圍的通用對(duì)象,但是新建一個(gè)Range
對(duì)象并不一定會(huì)在文檔上創(chuàng)建一個(gè)選擇。 Selection
對(duì)象是用來獲取文檔選擇的??梢酝ㄟ^winodw.getSelection()
或document.getSelection()
來獲取。一個(gè)選擇可以包括零個(gè)或多個(gè)范圍,但實(shí)際上除firefox允許同時(shí)選擇多個(gè)范圍,其他瀏覽器最多只能選擇一個(gè)范圍。
selection的屬性
如前所述,理論上一個(gè)選擇可能包含多個(gè)范圍。我們可以使用下面這個(gè)方法獲取這些范圍對(duì)象:
getRangeAt(i)
—— 獲取第 i
個(gè)范圍,i
從 0
開始。在除 Firefox 之外的所有瀏覽器中,僅使用 0
。
與范圍類似,選擇的起點(diǎn)被稱為“錨點(diǎn)(anchor)”,終點(diǎn)被稱為“焦點(diǎn)(focus)”。
主要的選擇屬性有:
anchorNode
—— 選擇的起始節(jié)點(diǎn),
anchorOffset
—— 選擇開始的 anchorNode
中的偏移量,
focusNode
—— 選擇的結(jié)束節(jié)點(diǎn),
focusOffset
—— 選擇開始處 focusNode
的偏移量,
isCollapsed
—— 如果未選擇任何內(nèi)容(空范圍)或不存在,則為 true
。
rangeCount
—— 選擇中的范圍數(shù),除 Firefox 外,其他瀏覽器最多為 1
。
selection錨點(diǎn)和焦點(diǎn)與range開始結(jié)束點(diǎn)的區(qū)別
selection的錨點(diǎn)可在選擇的焦點(diǎn)之后,以表達(dá)從右向左
選擇,而range的開始點(diǎn)必須在結(jié)束點(diǎn)之前
selection API
更多詳細(xì)API及其參數(shù)見 MDN Selection
以上就是Selection與Range 對(duì)象操作示例指南的詳細(xì)內(nèi)容,更多關(guān)于Selection Range 對(duì)象操作的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序 獲取javascript 里的數(shù)據(jù)
這篇文章主要介紹了微信小程序 獲取javascript 里的數(shù)據(jù)的相關(guān)資料,這里通過實(shí)例來說明如何獲取javascript里的數(shù)據(jù),希望能幫助到大家,需要的朋友可以參考下2017-08-08JS前端面試數(shù)組扁平化手寫flat函數(shù)示例
這篇文章主要為大家介紹了JS前端面試數(shù)組扁平化手寫flat函數(shù)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序 網(wǎng)絡(luò)API發(fā)起請(qǐng)求詳解
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)API發(fā)起請(qǐng)求詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11微信小程序 ecshop地址三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)實(shí)例代碼
這篇文章主要介紹了微信小程序 ecshop地址3級(jí)聯(lián)動(dòng)實(shí)現(xiàn)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02