操作範圍中的內容

在創建範圍時，內部會為這個範圍創建一個文檔片段

範圍所屬的全部節點都會被添加到這個片段中

雖然選取範圍可以不是完整的、良好的DOM結構

但是在這個為範圍創建的文檔片段中，會自己完缺少的閉合標簽，以此構建有效的DOM結構來方便我們操作

上述步驟都是內部實現的，因此我們可以不用過多地關註這一方面

首先是 deleteContents（）

這個方法會從文檔中刪除選中範圍的內容

以下方的HTML代碼為例

<p id = "p1"><b>hello</b>world!</p>

使用deleteContents（）方法：

var p1 = document.getElementById("p1");
 
var helloNode = p1.firstChild.firstChild;
var worldNode = p1.lastChild;
var range = document.createRange();

range.setStart(helloNode,2);
range.setEnd(worldNode,3);

range.deleContents();

此後文檔中的內容如下

<p id = "p1"><b>he</b>rld!</p>

由於在底層實現中JS會自動完整沒有閉合的標簽，所以能保有一個良好的文檔結構

然後就是 extractContents（）方法

這個方法和 delete Contents（）方法一樣都會從文檔中移除範圍內容

但是有所區別

這個方法會返回被移除的範圍中的內容

此外 cloneContents（） 方法用於復制範圍中的節點

和 extractContents（） 一樣都會返回節點，只不過這裏返回的不是實際節點

而是實際節點的副本

我們可以使用 appendChild（）方法將其重新插入文檔中

PS.在調用上述的操作範圍的方法之前，範圍中的內容並不會產生格式良好的文檔片段

向範圍中插入內容

首先是 insertNode（）方法，可以向範圍的開始處插入一個節點

例如：

var p1 = document.getElementById("p1");
 
var helloNode = p1.firstChild.firstChild;
var worldNode = p1.lastChild;
var range = document.createRange();

range.setStart(helloNode,2);
range.setEnd(worldNode,3);

var span = document.createElement("span");
span.style.color = "red";
span.appendChild(document.createTextNode("Inserted text"));
range.insertNode(span);

運行後會得到以下文檔結構

<p id = "p1"><b>he<spand style="color:red">Interted text</span>llo</b>world!</p>

此外還有一個方法 surroundContents（）用於環繞範圍插入內容

一般來說用於為範圍添加特殊樣式

折疊DOM範圍

折疊是指範圍沒有選中內容的情況，就相當於用鼠標選擇文字時的光標豎線一樣

該情況儲存在range 的 collapsed 屬性中

range.collapsed

可以用於判斷兩個節點十分緊密相鄰

比較範圍

在有多個範圍的情況下，可以使用 compareBoundaryPoints（）方法來確定範圍是否有公共邊界

該方法接收兩個參數：

1. 表示比較方式的常量：
   1. Range.START_TO_START(0) 比較兩個範圍的起點
   2. Range.START_TO_END(1) 比較第一個起點和第二個終點
   3. Range.END_TO_END(2); 比較兩個範圍的終點
   4. Range.END_TO_START(3) 比較第一個終點和第二個起點
2. 要比較的範圍

該方法對於第一個點在第二個比較的點之前返回-1

兩個點相同返回 0

第一個在第二個之後返回1

其它

復制DOM範圍

var newRange = range.cloneRange();

清理DOM範圍

range.detach();//從文檔中分離
range = null；//解除引用

Javascript高級編程學習筆記（55）—— DOM2和DOM3（7）操作範圍