JS 之DOM range對象

DOM范圍

DOM中的range對象是DOM2中新定義的接口。通過這個對象可以選擇文檔中的某個區域，而不必考慮節點的界限。

 

創建范圍

document.createRange()創建一個范圍，這個范圍是range類型的實例。包含下面這些屬性和方法。

startContainer：包含范圍起點的節點（選區中第一個節點的父節點）。

startOffset：范圍在startContainer中起點的偏移量。

endContainer：包含范圍終點的節點（選區中最后一個節點的父節點）。

endOffset：范圍在endContainer中終點的偏移量。

 

范圍選擇

selectNode()和selectNodeContents()方法用來選擇文檔中的某一部分。

var range = document.createRange();

range.selectNode(node)   參數為node節點，把整個node節點的信息，包括子節點中的內容填充到范圍range內。

range.selectNodeContents(node)   參數為node節點，把node節點的子節點信息填充到范圍range內。

 

操作范圍

在創建范圍時，內部會為這個范圍創建一個文檔片段，范圍所屬的全部節點會被添加到這個文檔片段中。創建范圍后，就可以對范圍的的內容進行操作了。

deleteContents()：從文檔中徹底刪除范圍所包含的內容。

var sec1 = document.getElementById('sec1');

var range = document.createRange();
range.selectNode(sec1);
range.deleteContents();   //刪除sec1節點

extractContents()：從文檔中移除范圍選區。這個方法的返回值是移除的片段，利用這個返回值，可以把這個片段插入到頁面的其他地方。

var sec1 = document.getElementById('sec1');
var sec2 = document.getElementById('sec2');

var range = document.createRange();
range.selectNode(sec1);      //創建范圍的內容
var fragment = range.extractContents();       //從文檔中移除范圍選區
sec2.parentNode.appendChild(fragment);      //在頁面的某處插入范圍中被移除的節點

cloneRange()：復制范圍，創建調用它的范圍的副本。

var newRange = range.cloneRange();

detach()：從范圍文檔中分類該范圍，也就是清理范圍。

range.detach();

range = null;

 

IE中的范圍

IE不支持DOM的range范圍，但是支持textRange文本范圍，文本范圍主要處理的是文本。

 

創建范圍

document.body.createTextRange();

 

范圍選擇

findText()方法：找到第一次出現的給定文本，並將范圍移過來環繞文本。如果找到文本返回true，否則返回false.

eg:

var range = document.body.createTextRange();

var isFound = range.findText('aa');    //如何找到返回true，否則返回false

var text = range.text    //輸出aa

與DOM中selectNode()方法最接近的是moveToElementText(),接受一個參數：節點名。選擇這個節點的所有內容填充到范圍里。

 

操作范圍

在IE中，操作范圍中的內容可以使用text屬性和pasteHTML()方法。通過text屬性可以取得范圍中的內容文本，也可以通過這個屬性來設置內容文本。要向范圍中插入html代碼，則使用pasteHTML()方法。

duplicate()：復制文本范圍。創建原范圍的一個副本。

 

總結自：《javascript 高級程序設計》