js dom 详细应用教程二

复杂的DOM Range

建立复杂的DOM range需要使用setStart()和setEnd()两个方法，这两个方法有两个参数：一个是一个节点(node)引用和一个偏移(offset)。
setStart方法节点的引用是startContainer，偏移则是startOffset；
setEnd()方法时，节点引用为endContainer，偏移就是endOffset。

使用这两个方法与selectNode()和selectNodeContents()方法相似。比如，下面的useRanges()函数的前一个示例，可以使用setStart()和setEnd():

function useRanges() {
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
var iP1Index = -1;
for (var i=0; i < oP1.parentNode.childNodes.length; i++) {
if (oP1.parentNode.childNodes == oP1) {
iP1Index = i;
break;
}
}

oRange1.setStart(oP1.parentNode, iP1Index);
oRange1.setEnd(oP1.parentNode, iP1Index + 1);
oRange2.setStart(oP1, 0);
oRange2.setEnd(oP1, oP1.childNodes.length);
//textbox assignments here
}

注意这个选择节点时的代码(oRange1)，你必须指定oP1父节点里所有childNodes集合里的一个索引。

而选择内容时的代码(oRange2)，则不需要额外的考虑，

从刚才的例子来从这段HTML里(code

Hello World

首先，我们必须用常规的DOM方法得到文本节点的引用还有就是容器p1的引用。
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
说明：
文本Hello实际上是容器p1的孙子节点，所以我们可以用oP1.firstChild得到元素，oP1.firstChild.firstChild也就是Hello文本节点的引用了，而World则就是容器p1的最后一个节点了。