JS 之DOM range對象

DOM範圍javascript

DOM中的range對象是DOM2中新定義的接口。經過這個對象能夠選擇文檔中的某個區域,而沒必要考慮節點的界限。html

 

建立範圍java

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

startContainer:包含範圍起點的節點(選區中第一個節點的父節點)。app

startOffset:範圍在startContainer中起點的偏移量。spa

endContainer:包含範圍終點的節點(選區中最後一個節點的父節點)。設計

endOffset:範圍在endContainer中終點的偏移量。code

 

範圍選擇htm

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 高級程序設計》

相關文章
相關標籤/搜索