快捷導(dǎo)航

Javascript標(biāo)準(zhǔn)DOM Range操作全集

更新時間：2007年01月09日 00:00:00 作者：

從Range中插入一些數(shù)據(jù)

前一節(jié)的幾個方法解決了如何移除range中所選中的fragment。現(xiàn)在說明如何添加內(nèi)容到Range中。
insertNode()方法可以插入一個節(jié)點(diǎn)到Range中。假如我想把以下的節(jié)點(diǎn)插如Range中，將如何操作呢？
<span style="color: red">Inserted text</span>

看下面的代碼：

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.color = "red";
oSpan.appendChild(document.createTextNode("Inserted text"));

oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.insertNode(oSpan);
</script>

那么原來的HTML將會變成這樣：
<p id="p1"><b>He<span style="color: red">Inserted text</span>llo</b> World</p>

surroundContents()的參數(shù)為一個node，它將這個node加入到Range，下面看這個示例。

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.backgroundColor = "yellow";

oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.surroundContents(oSpan);
</script>

在oRange選取的范圍內(nèi)有一個我們新生成的節(jié)點(diǎn)span，因此選取的Range的背景變成了黃色。

collapse()方法：

collapse()方法只有一個布爾型的參數(shù)，該參數(shù)為可選的，也就是說，可以有，也可以沒有，默認(rèn)為false。
true時折疊到Range邊界的首部，為false時折疊到Range尾部。即

<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.collapse(true);
</script>

如果你想知道該Range是否已經(jīng)折疊，可以用collapsed屬性來得到true或者false?？聪旅娴睦?。

<p id="p1">Paragraph 1</p><p id="p2">Paragraph 2</p>
<script>
var oP1 = document.getElementById("p1");
var oP2 = document.getElementById("p2");
var oRange = document.createRange();
oRange.setStartAfter(oP1);
oRange.setStartBefore(oP2);
alert(oRange.collapsed); //outputs "true"
</script>

上面的代碼輸為true。雖然我們沒有用collapse方法，但是由于我們的Range設(shè)置開始為1末端到p2的首端，沒有任何元素。即</p>(Range開始)(Range結(jié)束)<p id="p2">，所以顯示的是true。

Range邊界的比較

compareBoundaryPoints()方法，語法形式如下：
compare = comparerange.compareBoundaryPoints(how,sourceRange)

參數(shù)含義：
compare —— 返回1, 0, -1.（0為相等，1為時，comparerange在sourceRange之后，-1為comparerange在sourceRange之前）
how —— 為Range常數(shù)：END_TO_END|END_TO_START|START_TO_END|START_TO_START
sourceRange —— 一個Range對象的邊界。

看下面的例子：

<p id="p1"><b>Hello</b> World</p>
<script>
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
oRange1.selectNodeContents(oP1);
oRange2.selectNodeContents(oP1);
oRange2.setEndBefore(oP1.lastChild);
alert(oRange1.compareBoundaryPoints(Range.START_TO_START, oRange2));
//outputs 0
alert(oRange1.compareBoundaryPoints(Range.END_TO_END, oRange2));
//outputs 1;
</script>

下圖為這兩個Range的示意圖，結(jié)合代碼和上面的說明，可以清晰的分析出結(jié)果了。

克隆(clone)Range

這個操作很簡單，只需要一句語句即可：

var oNewRange = oRange.cloneRange();

cloneRange()方法將返回一個當(dāng)前Range的副本，當(dāng)然，它也是Range對象。

清除Range所占的系統(tǒng)資源

當(dāng)你創(chuàng)建了Range對象最好用detach()方法來清除它所占的系統(tǒng)資源。雖然不清除，GC（垃圾收集器）也會將其收集，但用detach()釋放是一個好習(xí)慣。語法為：

oRange.detach();

下面一個示例在Mozilla中，利用Range可以模擬出IE中的element.insertAdjacentHTML()方法，

if (browser.isMozilla) {
HTMLElement.prototype.insertAdjacentHTML = function (sWhere, sHTML) {
var df; var r = this.ownerDocument.createRange();
switch (String(sWhere).toLowerCase()) {
case "beforebegin":
r.setStartBefore(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df, this);
break;
case "afterbegin":
r.selectNodeContents(this);
r.collapse(true);
df = r.createContextualFragment(sHTML);
this.insertBefore(df, this.firstChild);
break;
case "beforeend":
r.selectNodeContents(this);
r.collapse(false);
df = r.createContextualFragment(sHTML);
this.appendChild(df);
break;
case "afterend":
r.setStartAfter(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df, this.nextSibling);
break;
}
};
}

參考文檔：

Professional JavaScript for Web Developers(Wrox)
Mozilla Develop Center Document

您可能感興趣的文章: