Range 物件

定義概念

Range (範圍)是文件中連續範圍區域，例如用滑鼠選中的區域。

主要用途：文件中的刪除、剪下、複製、貼上文字。

deleteContents()
extractContents()
cloneContents()
insertNode()

一個 range 具有兩個邊界點（anchor-focus）。每一個邊界點由一個節點（anchor-node focus-node）和一個偏移量（anchor-offset focus-offset）構成。這個節點可以是 element/document/text 節點。對於 element 和 document 節點，偏移量指的是位於子節點的位置；對於 text 節點，偏移量指的是文字中兩個字元間的位置。

屬性

在一個 range 中，所有的屬性都是隻讀的。只能通過方法改變range，才能改變對應的屬性。

collapsed 選中部分是否摺疊(開始點和結束點是否重合)
commonAncestorContainer Range中的開始點和結束點的祖先節點
startOffset-endOffset 開始點結束點的偏移量
startContainer-endContainer 開始點處於的Document節點

方法

cloneContents();
// 複製 Document Fragment 物件
deleteContents()；
// 刪除 Range 物件表示的 Document 區域
 

extractContents();
// 剪下 當前範圍的文字區域；(介面介紹，方法返回 Document Fragment 物件)

cloneRange();
// 複製 range 

collapse(); 
// 摺疊當前選中部分
detach()；
// 停止跟蹤(detach操作後，當前range的其他方法失效並報錯)
toString()；
// 返回該範圍表示的文件區域的純文字內容

compareBoundaryPoints(); 
// 比較當前範圍的邊界點和另一個範圍的邊界點；返回值 0 -1 1

insertNode();
// 將制定的節點插入文件範圍的開始點
selectNode();
// 選擇Range對應的邊界點，包含節點和子孫節點
 

selectNodeContents();
// 選擇邊界點的子孫節點(不包含外部這個節點)

setStart(); setEnd();
// 設定開始節點為指定的節點和偏移量；

range 常用在複製、貼上文字，配合滑鼠事件的觸發，獲取當前選中的部分，並將選中的document fragment 複製貼上建立新的 node 節點，並插入到指定位置。獲取節點的偏移量從而獲取選中的部分。

注意：上面的屬性方法基於 XML，slate 中的獨有的方法不完全相同。