Javascript高級編程學習筆記(55)—— DOM2和DOM3(7)操作範圍
操作範圍中的內容
在創建範圍時,內部會為這個範圍創建一個文檔片段
範圍所屬的全部節點都會被添加到這個片段中
雖然選取範圍可以不是完整的、良好的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()方法來確定範圍是否有公共邊界
該方法接收兩個參數:
- 表示比較方式的常量:
- Range.START_TO_START(0) 比較兩個範圍的起點
- Range.START_TO_END(1) 比較第一個起點和第二個終點
- Range.END_TO_END(2); 比較兩個範圍的終點
- Range.END_TO_START(3) 比較第一個終點和第二個起點
- 要比較的範圍
該方法對於第一個點在第二個比較的點之前返回-1
兩個點相同返回 0
第一個在第二個之後返回1
其它
復制DOM範圍
var newRange = range.cloneRange();
清理DOM範圍
range.detach();//從文檔中分離 range = null;//解除引用
Javascript高級編程學習筆記(55)—— DOM2和DOM3(7)操作範圍