JavaScript中怎么操作光標(biāo)和選區(qū)

發(fā)布時(shí)間：2021-06-30 11:18:53 來(lái)源：億速云閱讀：123 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了“JavaScript中怎么操作光標(biāo)和選區(qū)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript中怎么操作光標(biāo)和選區(qū)”這篇文章吧。

在一些業(yè)務(wù)場(chǎng)景，比如高亮文本、輸入編輯、等場(chǎng)景中需要對(duì)光標(biāo)和選區(qū)進(jìn)行操作時(shí)，可以使用瀏覽器提供的 Selection 對(duì)象和 Range 對(duì)象來(lái)操作光標(biāo)和選區(qū)。

Selection 對(duì)象

Selection 對(duì)象表示用戶(hù)選擇的選區(qū)或插入符號(hào)的當(dāng)前位置，它可能橫跨多個(gè)元素。

//獲取 Selection 對(duì)象
window.getSelection();

用戶(hù)可能從左到右（與文檔方向相同）選擇文本或從右到左（與文檔方向相反）選擇文本。

anchor （錨點(diǎn)）： 指用戶(hù)開(kāi)始選擇的地方。
focus （焦點(diǎn)）： 指用戶(hù)結(jié)束選擇的地方。

如果你使用鼠標(biāo)選擇文本的話(huà)，anchor 就指你按下鼠標(biāo)鍵的地方，而 focus 就指你松開(kāi)鼠標(biāo)鍵的地方。anchor 和 focus 的概念不能與選區(qū)的起始位置和終止位置混淆，因?yàn)?anchor 可能在 focus 的前面，也可能在 focus 的后面，這取決于你選擇文本時(shí)鼠標(biāo)移動(dòng)的方向，也就是按下鼠標(biāo)鍵和松開(kāi)鼠標(biāo)鍵的位置。

如下圖所示：

JavaScript中怎么操作光標(biāo)和選區(qū)

屬性：

anchorNode： 錨點(diǎn)（anchor）所在節(jié)點(diǎn)。
anchorOffset：

如果 anchorNode 是文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)，返回錨點(diǎn)（anchor）到該節(jié)點(diǎn)中第一個(gè)字的字符個(gè)數(shù)。
如果 anchorNode 是元素節(jié)點(diǎn)，返回錨點(diǎn)（anchor）之前的同級(jí)節(jié)點(diǎn)總數(shù)。

focusNode： 焦點(diǎn)（focus）所在節(jié)點(diǎn)。
focusOffset：

如果 focusNode 是文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)，返回焦點(diǎn)（focus）到該節(jié)點(diǎn)中的第一個(gè)字的字符個(gè)數(shù)。
如果 focusNode 是元素節(jié)點(diǎn)，返回焦點(diǎn)（focus）之前的同級(jí)節(jié)點(diǎn)總數(shù)。

isCollapsed： 表示選區(qū)的起始位置和終止位置是否重合的 Boolean 值，如果為 true，可以認(rèn)為當(dāng)前沒(méi)有內(nèi)容選中。
rangeCount： 選區(qū)中包含的 Range 對(duì)象數(shù)量。
type： 描述當(dāng)前選區(qū)的類(lèi)型，有以下三個(gè)值：

None： 當(dāng)前沒(méi)有選擇。
Caret： 僅單擊，但未選擇，選區(qū)已折疊（即光標(biāo)在字符之間，并未處于選中狀態(tài)）。
Range： 選擇的是一個(gè)范圍。

注意：

以上所有屬性都是只讀屬性。

方法：

addRange(range)

向選區(qū)（Selection 對(duì)象）中添加一個(gè)區(qū)域（ Range 對(duì)象）。

參數(shù)：

range：一個(gè)區(qū)域?qū)ο?/p>

示例：

<p id="text">文本</p>

//添加一個(gè)選區(qū)
var text = document.querySelector("#text");
var selObj = window.getSelection();
var rangeObj = document.createRange();
rangeObj.selectNode(text);
selObj.addRange(rangeObj);

collapse(parentNode,offset)
收起當(dāng)前選區(qū)到一個(gè)點(diǎn)。文檔不會(huì)發(fā)生改變。
參數(shù)：
parentNode：光標(biāo)落在的目標(biāo)節(jié)點(diǎn)
offset：可選，在目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量
示例：
```
<div contenteditable="true" id="text">文本</div>
```
```
//收起選區(qū)到一個(gè)點(diǎn)，光標(biāo)落在一個(gè)可編輯元素上
var text = document.querySelector("#text")
window.getSelection().collapse(text,0);
```
collapseToEnd()
取消當(dāng)前選區(qū)，并把光標(biāo)定位在原選區(qū)的最末尾處。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
selObj.collapseToEnd();
```
collapseToStart()
取消當(dāng)前選區(qū)，并把光標(biāo)定位在原選區(qū)的最開(kāi)始處。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
selObj.collapseToStart();
```
containsNode(aNode,aPartlyContained)
判斷指定的節(jié)點(diǎn)是否包含在 Selection 對(duì)象中（即是否被選中）。
參數(shù)：
aNode：用于判斷是否包含在 Selection 對(duì)象中的節(jié)點(diǎn)。
aPartlyContained：
當(dāng)此參數(shù)為 true 時(shí)，Selection 對(duì)象包含 aNode 的一部分或全部時(shí)，containsNode() 方法返回true。
當(dāng)此參數(shù)為 false （默認(rèn)值）時(shí)，只有 Selection 對(duì)象完全包含 aNode 時(shí)，containsNode() 方法才返回 true。
示例：
```
<div id="text">文本</div>
```
```
var text = document.querySelector("#text");
var selObj = window.getSelection();
var contains = selObj.containsNode(text);
```
deleteFromDocument()
從 DOM 中刪除選中的文檔片段。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
selObj.deleteFromDocument();
```
extend(node,offset)
移動(dòng)選區(qū)的焦點(diǎn)（focus）到指定的點(diǎn)。選區(qū)的錨點(diǎn)（anchor）不會(huì)移動(dòng)。選區(qū)將從錨點(diǎn)（anchor）開(kāi)始到新的焦點(diǎn)（focus），不管方向。
參數(shù)：
node：焦點(diǎn)（focus）會(huì)被移至此節(jié)點(diǎn)內(nèi)。
offset：可選，默認(rèn)值為0，焦點(diǎn)（focus）會(huì)被移至 node 內(nèi)的偏移位置。
示例：
```
<div id="text">文本</div>
```
```
var text = document.querySelector("#text");
var selObj = window.getSelection();
selObj.extend(text);
```
getRangeAt(index)
返回一個(gè)當(dāng)前選區(qū)包含的 Range 對(duì)象。
參數(shù)：
index：該參數(shù)指定 Range 對(duì)象的索引。如果該數(shù)值大于或等于 rangeCount ，將會(huì)報(bào)錯(cuò)。
示例：
```
//獲取一個(gè) Selection 對(duì)象
var selObj = window.getSelection();
//獲取一個(gè) Range 對(duì)象
var rangeObj  = selObj.getRangeAt(0);
```
modify(alter,direction,granularity)
通過(guò)文本命令來(lái)更改當(dāng)前選區(qū)或光標(biāo)位置。
參數(shù)：
alter：改變類(lèi)型，傳入 move 來(lái)移動(dòng)光標(biāo)位置，或者 extend 來(lái)擴(kuò)展當(dāng)前選區(qū)。
direction：調(diào)整選區(qū)的方向。你可以傳入 forward 或 backward 來(lái)根據(jù)選區(qū)內(nèi)容的語(yǔ)言書(shū)寫(xiě)方向來(lái)調(diào)整?；蛘呤褂?left 或 right 來(lái)指明一個(gè)明確的調(diào)整方向。
granularity：調(diào)整的距離顆粒度。可選值有 character、word、sentence、line、paragraph、lineboundary、sentenceboundary、paragraphboundary、documentboundary。
示例：
```
var selection = window.getSelection();
selection.modify("extend", "forward", "word");
```

removeAllRanges()
會(huì)從當(dāng)前 Selection 對(duì)象中移除所有的 Range 對(duì)象，取消所有的選擇。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
selObj.removeAllRanges();
```
removeRange(range)
將一個(gè) Range 對(duì)象從選區(qū)中移除。
參數(shù)：
range：一個(gè)將從選區(qū)中移除的 Range 對(duì)象。
示例：
```
var selObj = window.getSelection();
var rangeObj = selObj.getRangeAt(0)
selObj.removeRange(rangeObj);
```

selectAllChildren(parentNode)

把指定元素的所有子元素設(shè)置為選區(qū)（該元素本身除外），并取消之前的選區(qū)。

參數(shù)：

parentNode：指定元素

示例：

<div id="selectAll">
  <div>文本1</div>
  <div>文本2</div>
</div>

var selectAll = document.querySelector("#selectAll");
var selObj = window.getSelection();
selObj.selectAllChildren(selectAll);

setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)
選中兩個(gè)特定 DOM 節(jié)點(diǎn)之間的內(nèi)容。
參數(shù)：
anchorNode：選中內(nèi)容的開(kāi)始節(jié)點(diǎn)
anchorOffset：選區(qū)起始位置在 anchorNode 內(nèi)的偏移量。
如果 anchorNode 是文本節(jié)點(diǎn)，表示選區(qū)起始位置在該節(jié)點(diǎn)第幾個(gè)字符位置。
如果 anchorNode 是元素節(jié)點(diǎn)，表示選區(qū)起始位置在該節(jié)點(diǎn)內(nèi)第幾個(gè)子節(jié)點(diǎn)的位置。
focusNode：選中內(nèi)容的結(jié)束節(jié)點(diǎn)
focusOffset：選區(qū)終止位置在 focusNode 內(nèi)的偏移量。
如果 focusNode 是文本節(jié)點(diǎn)，表示選區(qū)終止位置在該節(jié)點(diǎn)第幾個(gè)字符位置。
如果 focusNode 是元素節(jié)點(diǎn)，表示選區(qū)終止位置在該節(jié)點(diǎn)內(nèi)第幾個(gè)子節(jié)點(diǎn)的位置。

示例：

<div id="start"></div>
<div id="end"></div>

var start = document.querySelector("#start");
var end = document.querySelector("#end");
var selObj = window.getSelection();
selObj.setBaseAndExtent(start,0,end,0);

toString()
返回代表當(dāng)前 Selection 對(duì)象的字符串，例如當(dāng)前選擇的文本。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
selObj.toString();
```

Range 對(duì)象

Range 對(duì)象表示被選中的文檔片段。一個(gè) Range 對(duì)象可能包含整個(gè)元素節(jié)點(diǎn)，也可能包含元素節(jié)點(diǎn)的一部分，例如文本節(jié)點(diǎn)的一部分文字。用戶(hù)通常只能選擇一個(gè) Range 對(duì)象，但是有的時(shí)候用戶(hù)也有可能選擇多個(gè) Range 對(duì)象（只有火狐瀏覽器可以選擇多個(gè) Range 對(duì)象）。

可以用 Document 對(duì)象的 Document.createRange 方法創(chuàng)建 Range，也可以用 Selection 對(duì)象的 getRangeAt 方法獲取 Range。另外，還可以通過(guò) Document 對(duì)象的構(gòu)造函數(shù) Range() 來(lái)得到 Range。

屬性：

collapsed： 返回一個(gè)表示起始位置和終止位置是否相同的 Boolean 值。
commonAncestorContainer： 返回包含 startContainer 和 endContainer 的最深一級(jí)的節(jié)點(diǎn)。
endContainer： 返回包含 Range 終點(diǎn)位置的節(jié)點(diǎn)。
endOffset：

如果 endContainer 是文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)，返回該節(jié)點(diǎn)第一個(gè)字到選區(qū)邊界的字符個(gè)數(shù)（即被選中的字符個(gè)數(shù)）。
如果 endContainer 是元素節(jié)點(diǎn)，返回選區(qū)終止位置之后第一個(gè)節(jié)點(diǎn)之前的同級(jí)節(jié)點(diǎn)總數(shù)。

startContainer： 返回包含 Range 開(kāi)始位置的節(jié)點(diǎn)。
startOffset：

如果 startContainer 是文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)，返回該節(jié)點(diǎn)第一個(gè)字到選區(qū)邊界的字符個(gè)數(shù)（即未被選中的字符個(gè)數(shù)）。
如果 startContainer 是元素節(jié)點(diǎn)，返回選區(qū)起始位置第一個(gè)節(jié)點(diǎn)之前的同級(jí)節(jié)點(diǎn)總數(shù)。

注意：

以上所有屬性都是只讀屬性。

方法：

cloneContents()

返回一個(gè)文檔片段，它是 Range 對(duì)象中所有節(jié)點(diǎn)的副本。

參數(shù)：

無(wú)

示例：

// 在文檔中插入選中元素
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
documentFragment = rangeObj.cloneContents();
document.body.appendChild(documentFragment);

cloneRange()
返回一個(gè) Range 對(duì)象的副本（兩個(gè)對(duì)象各自做出改變，都不會(huì)影響另一方）。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
clone = rangeObj.cloneRange();
```
collapse(toStart)
向開(kāi)始或結(jié)束方向折疊 Range 。
參數(shù)：
toStart：可選，Boolean 值（默認(rèn)值 false）， true 折疊到 Range 的開(kāi)始方向，false 折疊到結(jié)束方向。
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
rangeObj.collapse(true);
```

compareBoundaryPoints(how, sourceRange)

比較兩個(gè) Range 對(duì)象的起始位置節(jié)點(diǎn)或結(jié)束位置節(jié)點(diǎn)。

參數(shù)：

how 表示比較方法的常量：

  Range.END_TO_END ：比較 sourceRange 對(duì)象的結(jié)束位置節(jié)點(diǎn)和原 Range 對(duì)象的結(jié)束位置節(jié)點(diǎn)。
  Range.END_TO_START ：比較 sourceRange 對(duì)象的結(jié)束位置節(jié)點(diǎn)和原 Range 對(duì)象的起始位置節(jié)點(diǎn)。
  Range.START_TO_END ：比較 sourceRange 對(duì)象的起始位置節(jié)點(diǎn)和原 Range 對(duì)象的結(jié)束位置節(jié)點(diǎn)。
  Range.START_TO_START ：比較 sourceRange 對(duì)象的起始位置節(jié)點(diǎn)和原 Range 對(duì)象的起始位置節(jié)點(diǎn)。

sourceRange：一個(gè)與原 Range 對(duì)象比較的 Range 對(duì)象。

返回值

compare 表示一個(gè)數(shù)字：

  -1 ：原 Range 對(duì)象的比較節(jié)點(diǎn)在 sourceRange 對(duì)象的比較節(jié)點(diǎn)之前  
  0 ：原 Range 對(duì)象的比較節(jié)點(diǎn)在 sourceRange 對(duì)象的比較節(jié)點(diǎn)的相同位置   
  1 ：原 Range 對(duì)象的比較節(jié)點(diǎn)在 sourceRange 對(duì)象的比較節(jié)點(diǎn)之后

示例：

<div id="range">range</div>
<div id="sourceRange">sourceRange</div>

var range, sourceRange, compare;
range = document.createRange();
range.selectNode(document.querySelector("#rang"));
sourceRange = document.createRange();
sourceRange.selectNode(document.querySelector("#sourceRange"));
compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange);

comparePoint(referenceNode,offset)
判斷指定節(jié)點(diǎn)是在 Range 對(duì)象的之前、相同還是之后位置。
參數(shù)：
referenceNode：與 Range 對(duì)象進(jìn)行比較的節(jié)點(diǎn)。
offset：在 referenceNode 內(nèi)的偏移量。
如果 referenceNode 是文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)，offset 表示在該節(jié)點(diǎn)中字符的偏移位置。
如果 referenceNode 是元素節(jié)點(diǎn)，offset 表示在該節(jié)點(diǎn)中子元素的偏移位置。
示例：
```
<div id="range">range</div>
<div id="referenceNode">referenceNode</div>
```
```
range = document.createRange();
range.selectNode(document.querySelector("#range"));
returnValue = range.comparePoint(document.querySelector("#referenceNode"), 0);
```

createContextualFragment(tagString)

將 HTML 字符串轉(zhuǎn)換為文檔片段

參數(shù)：

tagString：要轉(zhuǎn)換的 HTML 字符串。

示例：

var tagString = "<div>node</div>";
var range = document.createRange();
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);

deleteContents()
從 DOM 中刪除選中的文檔片段，不返回刪除的文檔片段。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
rangeObj.deleteContents();
```
extractContents()
從 DOM 中刪除選中的文檔片段，返回刪除的文檔片段（不保留 DOM 事件）。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
rangeObj.extractContents();
```
getBoundingClientRect()
返回一個(gè) DOMRect 對(duì)象，表示整個(gè)選區(qū)的位置信息。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var boundingRect = rangeObj.getBoundingClientRect();
```
getClientRects()
返回一個(gè)選區(qū)內(nèi)所有元素調(diào)用 Element.getClientRects() 方法所得結(jié)果的列表。表示選區(qū)在屏幕上所占的區(qū)域。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var boundingRect = rangeObj.getClientRects();
```

insertNode(newNode)

在選區(qū)開(kāi)始處插入一個(gè)節(jié)點(diǎn)。

參數(shù)：

newNode：需要插入的節(jié)點(diǎn)

示例：

<div id="insertNode">insertNode</div>
<div id="node">node</div>

range = document.createRange();
newNode = document.querySelector("#node");
range.selectNode(document.querySelector("#insertNode"));
range.insertNode(newNode);

intersectsNode(referenceNode)

返回一個(gè) Boolean 值，判斷指定節(jié)點(diǎn)和 Range 對(duì)象是否相交。

參數(shù)：

referenceNode：需要比較的節(jié)點(diǎn)

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.intersectsNode(referenceNode);

isPointInRange(referenceNode,offset)
返回一個(gè) Boolean 值，判斷指定節(jié)點(diǎn)是否在 Range 對(duì)象內(nèi)。
參數(shù)：
referenceNode：指定節(jié)點(diǎn)
offset：在 referenceNode 內(nèi)的偏移量。
如果 referenceNode 是文本節(jié)點(diǎn)，offset 表示在該節(jié)點(diǎn)中字符的偏移位置。
如果 referenceNode 是元素節(jié)點(diǎn)，offset 表示在該節(jié)點(diǎn)中子元素的偏移位置。
示例：
```
<div id="referenceNode">referenceNode</div>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.isPointInRange(referenceNode,0);
```

selectNode(referenceNode)

將指定節(jié)點(diǎn)包含在 Range 對(duì)象內(nèi)。

參數(shù)：

referenceNode：指定節(jié)點(diǎn)

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.selectNode(referenceNode);

selectNodeContents(referenceNode)

將指定節(jié)點(diǎn)的內(nèi)容包含在 Range 對(duì)象內(nèi)。

參數(shù)：

referenceNode：指定節(jié)點(diǎn)

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.selectNodeContents(referenceNode);

setEnd(endNode,endOffset)
設(shè)置選區(qū)的終止位置。
參數(shù)：
endNode：終止位置所在的節(jié)點(diǎn)
endOffset：在 endNode 內(nèi)的偏移量。
如果 endNode 是文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)，endOffset 表示在該節(jié)點(diǎn)中字符的偏移位置。
如果 endNode 是元素節(jié)點(diǎn)，endOffset 表示在該節(jié)點(diǎn)中子元素的偏移位置。
示例：
```
<div id="endNode">endNode</div>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var endNode = document.querySelector("#endNode");
rangeObj.setEnd(endNode,0)
```

setEndAfter(referenceNode)

設(shè)置選區(qū)的結(jié)束位置在指定節(jié)點(diǎn)之后。

參數(shù)：

referenceNode：指定節(jié)點(diǎn)

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var referenceNode = document.querySelector("#referenceNode");
rangeObj.setEndAfter(referenceNode)

setEndBefore(referenceNode)

設(shè)置選區(qū)的結(jié)束位置在指定節(jié)點(diǎn)之前。

參數(shù)：

referenceNode：指定節(jié)點(diǎn)

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var referenceNode = document.querySelector("#referenceNode");
rangeObj.setEndBefore(referenceNode)

setStart(startNode,startOffset)
設(shè)置選區(qū)的起始位置。
參數(shù)：
startNode：起始位置所在的節(jié)點(diǎn)
startOffset：在 startNode 內(nèi)的偏移量。
如果 startNode 是文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)，startOffset 表示在該節(jié)點(diǎn)中字符的偏移位置。
如果 startNode 是元素節(jié)點(diǎn)，startOffset 表示在該節(jié)點(diǎn)中子元素的偏移位置。
示例：
```
<p id="startNode">startNode</p>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
startNode = document.querySelector("#startNode");
rangeObj.setStart(startNode,0)
```

setStartAfter(referenceNode)

設(shè)置選區(qū)的起始位置在指定節(jié)點(diǎn)之后。

參數(shù)：

referenceNode：指定節(jié)點(diǎn)

示例：

<div id="startNode">startNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.setStartAfter(referenceNode)

setStartBefore(referenceNode)

設(shè)置選區(qū)的起始位置在指定節(jié)點(diǎn)之前。

參數(shù)：

referenceNode：指定節(jié)點(diǎn)

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.setStartBefore(referenceNode)

surroundContents(newParent)
把指定節(jié)點(diǎn)插入選區(qū)的起始位置，然后把指定節(jié)點(diǎn)的內(nèi)容替換為選區(qū)的內(nèi)容。
參數(shù)：
newParent：指定節(jié)點(diǎn)
示例：
```
<div id="newParent">newParent</div>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
newParent = document.querySelector("#newParent");
rangeObj.surroundContents(newParent)
```
toString()
返回代表當(dāng)前 Range 對(duì)象的字符串，例如當(dāng)前選擇的文本。
參數(shù)：
無(wú)
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var rangeStr = rangeObj.toString();
```

選區(qū)中的多個(gè)區(qū)域

一個(gè) Selection 對(duì)象表示用戶(hù)選擇的區(qū)域（Range 對(duì)象）的集合，通常它只包含一個(gè)區(qū)域，訪(fǎng)問(wèn)方式如下：

//獲取一個(gè) Selection 對(duì)象
var selObj = window.getSelection();
//獲取一個(gè) Range 對(duì)象
var rangeObj  = selObj.getRangeAt(0);

只有火狐瀏覽器實(shí)現(xiàn)了多個(gè)區(qū)域，如下圖所示：

JavaScript中怎么操作光標(biāo)和選區(qū)

修改選區(qū)樣式

使用 ::selection 選擇器可以匹配被選中的部分。
目前只有一小部分 CSS 屬性可以用于 ::selection 選擇器：

color
background-color
text-shadow

示例

JavaScript中怎么操作光標(biāo)和選區(qū)

以上是“JavaScript中怎么操作光標(biāo)和選區(qū)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

JavaScript中怎么操作光標(biāo)和選區(qū)

Selection 對(duì)象

屬性：

方法：

addRange(range)

參數(shù)：

示例：

collapse(parentNode,offset)

參數(shù)：

示例：

collapseToEnd()

參數(shù)：

示例：

collapseToStart()

參數(shù)：

示例：

containsNode(aNode,aPartlyContained)

參數(shù)：

示例：

deleteFromDocument()

參數(shù)：

示例：

extend(node,offset)

參數(shù)：

示例：

getRangeAt(index)

參數(shù)：

示例：

modify(alter,direction,granularity)

參數(shù)：

示例：

removeAllRanges()

參數(shù)：

示例：

removeRange(range)

參數(shù)：

示例：

selectAllChildren(parentNode)

參數(shù)：

示例：

setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)

參數(shù)：

示例：

toString()

參數(shù)：

示例：

Range 對(duì)象

屬性：

方法：

cloneContents()

參數(shù)：

示例：

cloneRange()

參數(shù)：

示例：

collapse(toStart)

參數(shù)：

示例：

compareBoundaryPoints(how, sourceRange)

參數(shù)：

返回值

示例：

comparePoint(referenceNode,offset)

參數(shù)：

示例：

createContextualFragment(tagString)

參數(shù)：

示例：

deleteContents()

參數(shù)：

示例：

extractContents()

參數(shù)：

示例：

getBoundingClientRect()

參數(shù)：

示例：

getClientRects()

參數(shù)：

示例：