範圍

為了讓開發人員更加方便地控制頁面“DOM2級遍歷和範圍”模塊定義了“範圍”接口

通過該接口開發人員可以選擇文檔中的一個區域，而不必考慮元素的界限

在常規操作不能有效地修改文檔時，使用範圍往往可以達到目的

DOM中的範圍

DOM2級在Document類型中定義了 createRange（）方法

在兼容該接口的瀏覽器中，該方法屬於document對象

可以使用以下代碼，檢測瀏覽器對其的兼容

var supportsRange = document.implementation.hasFeature("Range","2.0");
var alsoSupportsRange = (typeof
 
 document.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）範圍選擇