DOM中的范圍 createRange()

學習《JavaScript 高級程序設計》 12章dom范圍的筆記

dom2級在Document類型中定義了 createRange()方法；

創建range對象很簡單 var range = document.createRange() 

操作range對象，有兩個步驟，1選擇節點，2,操作節點

選擇節點：

最簡單的選擇節點方法：

 selectNode() :選擇整個節點，包括子節點

 selectNodeContents()  選擇節點的子節點

區別就是 例如這樣一段html代碼中 <p id="p1"><b>Hello</b> world!</p> 

var range1 = document.createRange(),
    range2 = document.createRange(),
    p1 = document.getElementById("p1");
range1.selectNode(p1);
range2.selectNodeContents(p1);

他們的節點范圍就是 

以上2個方法只能選擇節點集合，需要精細選擇節點，要用到的是 setStart()  和  setEnd() 個方法都接受兩個參數：一個參照節點，一個節點偏移量

例如

 <p id="p1">Hello world!</p> 

 

range = document.createRange();
p1 = document.getElementById("p1").childNodes[0];
range.setStart(p1,2);
range.setEnd(p1,8);

選中的將會是 llo wo（注意！以0為基數，空格也算一個文本字符，占1個偏移量）

 2.操作節點

 deleteContents() 這個方法能夠從文檔中刪除范圍縮包含的內容

 extractContents() 會刪除並返回文檔片段

 CloneContents() 創建范圍對象的一個副本，不會影響原來的節點

 insertNode() 向范圍選區的開始處插入一個節點

 surroundContents() 環繞范圍插入內容 

 

其他：

復制 DOM 范圍  ： 可以使用 cloneRange()方法復制范圍。這個方法會創建調用它的范圍的一個副本。

 var newRange = range.cloneRange();  

清理 DOM 范圍 ：

在使用完范圍之后，最好是調用 detach() 方法，以便從創建范圍的文檔中分離出該范圍。調用
detach()之后，就可以放心地解除對范圍的引用，從而讓垃圾回收機制回收其內存了。來看下面的
例子

range.detach(); //從文檔中分離
range = null; //解除引用
推薦在使用范圍的最后再執行這兩個步驟。一旦分離范圍，就不能再恢復使用了。

 

復制

const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
selection.removeAllRanges()

喜歡這篇文章？歡迎打賞~~