欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Selection與Range 對(duì)象操作示例指南

 更新時(shí)間:2022年09月01日 09:59:24   作者:yangcrazy30  
這篇文章主要為大家介紹了Selection與Range 對(duì)象操作示例指南,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

前言

有些時(shí)候我們需要能夠通過JavaScript訪問頁面的當(dāng)前選擇,已達(dá)成選擇(取消選擇)部分節(jié)點(diǎn)以從文檔中刪除所選內(nèi)容或像文檔中插入某些新內(nèi)容。我們需要RangeSelction對(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)

選擇部分文本

setStartsetEnd方法的第一個(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)文章

最新評(píng)論