JavaScript中如何操作光標(biāo)和選區(qū)？下面本篇文章帶大家了解一下 Selection 對(duì)象和 Range 對(duì)象，介紹一下怎么借助這兩個(gè)對(duì)象來(lái)操作光標(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)鍵的位置。

如下圖所示：

屬性：

• 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ū)域，訪問(wèn)方式如下：

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

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

修改選區(qū)樣式

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

• color
• background-color
• text-shadow

示例

示例地址：https://www.kkkk1000.com/images/SelectionRange/selection.html