一聚教程网:一个值得你收藏的教程网站

热门教程

js dom 详细应用教程二

时间:2022-07-02 13:50:05 编辑:袖梨 来源:一聚教程网

复杂的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

)
选择从hello中的llo开始到从World中的Wo开始的Range,我们用setStart()和setEnd(),很容易就可以做到。

首先,我们必须用常规的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的最后一个节点了。

下一步,建立range然后设置偏移(offset):
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);
说明:
对于setStart(),偏移(offset)为2,因为字母l在该文本节点中(即Hello中)的位置是2,(位置是从0开始计算的),设置setEnd()方法中的偏移为3,原因同上,需要注意的是World前面有一个空格,空格也是占位置的。如图:
30_141714_domranges3.gif


注意:
(Mozilla DOM Range bug #135928)在 Mozilla低版本浏览器 执行此Range方法时,如果setStart()和setEnd()都指向同一个文本节点会出现异常

用DOM Range做一些操作
当创建一个Range对象时,在Range里的所有对象之上,已经创建了一个文档的fragment节点。在这之前,Range对象必须合格证你选择的这段Range是一个well-formed(格式良好)。
比如以面这段Range
30_165636_domranges4.gif

很明显的,在这里,并不是一个well-formed,上面说过了,当创建一个Range时,会自动产生一个fragment,在这里,framgment自动动态的添加一些元素,以保证Range的正确性:

Hello World


也就是自动加上了开始标签,使得整个Range变为llo Wo,fragment的示意图为:
30_170131_domranges5.gif

当此fragment创建后,你就可以用Range的一些方法来操作它了。

最简单的一个操作就是:deleteContents()方法,这个方法将删除Range选中的部分,在上面的操作之后进行deleteContents(),那么余下的HTML就为:

Herld


之所以加上闭合标签
,上面也说了,也是Range为了确保它是well-formed。

extractContents ()方法类似于deleteContents(),但具体操作不同,extractContents()是将选中的Range从DOM树中移到一个 fragment中,并返回此fragment,复制下面这些代码然后在Mozilla Firefox里运行,看看结果你就明白了。——删除的llo Wo作为一个fragment被添加到body的末端。

Hello World


cloneContents()方法可以克隆选中Range的fragment,比如:

Hello World


这个方法类似于extractContents(),但是不是删除,而是克隆。