Javascript高級編程學習筆記(54)—— DOM2和DOM3(6)範圍選擇
範圍
為了讓開發人員更加方便地控制頁面“DOM2級遍歷和範圍”模塊定義了“範圍”接口
通過該接口開發人員可以選擇文檔中的一個區域,而不必考慮元素的界限
在常規操作不能有效地修改文檔時,使用範圍往往可以達到目的
DOM中的範圍
DOM2級在Document類型中定義了 createRange()方法
在兼容該接口的瀏覽器中,該方法屬於document對象
可以使用以下代碼,檢測瀏覽器對其的兼容
var supportsRange = document.implementation.hasFeature("Range","2.0"); var alsoSupportsRange = (typeofdocument.createRange ==="function");
如果瀏覽器支持範圍,那麽就可以使用createRange()來創建範圍
var range = document.createRange();
與節點類似,創建的範圍也會和文檔關聯,不能用於其它文檔
每個範圍由一個Range類型的實例表示
下列屬性提供了範圍在文檔中的位置信息
- startContainer:包含範圍起點的節點(即選區中第一個節點的父節點)
- startOffset:範圍起點在startContainer 中的偏移量
- endContainer:包含範圍終點的節點(即選區中最後一個節點的父節點)
- endOffset:範圍終點在endContainer中的偏移量
- commonAncestorContainer:距離起點和終點最近的公共祖先節點
用DOM範圍實現簡單選擇
使用範圍來選擇文檔中的一部分,最簡單的方式就是通過
selectNode() 和 selectNodeContents()方法
這兩個方法都接收一個參數,即一個DOM節點
selectNode 是將傳入節點的整個節點作為範圍
selectNodeContents則是將傳入節點的所有子節點作為範圍
例如:
<p id = "p1"><b>hello</b>world!</p>
對於以上HTML代碼
使用以下代碼創建範圍
var range1 = document.createRange();var range2 = document.createRange(); var p1 = document.getElementById(‘p1‘); range1 = range1.selectNode(p1); range2 = range2.selectNodeContents(p1);
對於上述代碼
range1包含的文檔內容如下:
<p id = "p1"><b>hello</b>world!</p>
range2包含的文檔內容如下:
<b>hello</b>world!
此外,為了更加精細地控制將哪些節點包含在範圍中,還可以使用以下方法
- setStartBefore(refNode):將範圍起點設置在 refNode 之前(也就是refNode作為範圍的第一個子節點)
- setStartAfter(refNode):將範圍起點設置在 refNode 之後(即refNode的下一個同輩節點作為範圍的第一個子節點)
- setEndBefore(refNode):將範圍終點設置在 refNode 之前
- setEndAfter(refNode):將範圍終點設置在 refNode 之後
使用這裏提到的方法會自動設置範圍屬性,當然也可以通過設置範圍屬性來改變選區的範圍
即startContainer、startOffset、endContainer、endOffset、commonAncestorContainer這些選區屬性
用DOM範圍實現復雜選擇
當我們需要更加復雜的選區,比如我們需要選擇某個節點的一部分時
要創建這樣復雜的節點,則需要使用 setStart()和 setEnd()來分別設置範圍的起止位置
這兩個方法都接收兩個參數:
1.DOM節點
2.開始/結束位置在節點中的偏移量
同樣下方的HTML代碼為例
<p id = "p1"><b>hello</b>world!</p>
這裏我們使用setStart()和 setEnd()來實現之前的range1、range2
即如下方代碼所示:
var range1 = document.createRange(); var range2 = document.createRange(); var p1 = document.getElementById(‘p1‘); var Index = -1;//用於表示p1在其父節點中的偏移 for(let i = 0,len = p1.parentNode.childNodes.length;i<len;i++){ if(p1.parentNode.childNodes[i] === p1){ Index = i; break; } } range1.setStart(p1.parentNode, Index); range1.setEnd(p1.parentNode, Index+1); range2.setStart(p1, 0); range2.setEnd(p1, p1.childNodes.length);
Javascript高級編程學習筆記(54)—— DOM2和DOM3(6)範圍選擇