Javascript标准DOM Range操作全集
更新时间：2007年01月09日 00:00:00 作者：
从Range中插入一些数据
前一节的几个方法解决了如何移除range中所选中的fragment。现在说明如何添加内容到Range中。
insertNode()方法可以插入一个节点到Range中。假如我想把以下的节点插如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>
<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()的参数为一个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>
<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选取的范围内有一个我们新生成的节点span，因此选取的Range的背景变成了黄色。
collapse()方法：
collapse()方法只有一个布尔型的参数，该参数为可选的，也就是说，可以有，也可以没有，默认为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>
<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是否已经折叠，可以用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设置开始为1末端到p2的首端，没有任何元素。即</p>(Range开始)(Range结束)<p id="p2">，所以显示的是true。<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>
Range边界的比较
compareBoundaryPoints()方法，语法形式如下：
compare = comparerange.compareBoundaryPoints(how,sourceRange)
参数含义：
compare —— 返回1, 0, -1.（0为相等，1为时，comparerange在sourceRange之后，-1为comparerange在sourceRange之前）
how —— 为Range常数：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的示意图，结合代码和上面的说明，可以清晰的分析出结果了。<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>
克隆(clone)Range
这个操作很简单，只需要一句语句即可：
var oNewRange = oRange.cloneRange();
cloneRange()方法将返回一个当前Range的副本，当然，它也是Range对象。
清除Range所占的系统资源
当你创建了Range对象最好用detach()方法来清除它所占的系统资源。虽然不清除，GC（垃圾收集器）也会将其收集，但用detach()释放是一个好习惯。语法为：
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;
}
};
}
参考文档：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
相关文章
下面小编就为大家带来一篇老生常谈onBlur事件与onfocus事件(js)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
在初学JS的时候就知道这个函数，却一直没有了解过他的用途，也一直都是睁一只眼闭一只眼，这次来深入地了解一下这个函数的作用。2010-01-01
Javascript typeof与instanceof的区别
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。但它们之间还是有区别的,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了JavaScript中的this关键字使用,是JavaScript入门学习中的基础知识,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了详解JavaScript中shift()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
js常用函数 不错...2006-09-09
这篇文章主要介绍了原生的强大DOM选择器querySelector一些相关知识,需要的朋友可以参考下2016-12-12
下面小编就为大家带来一篇javascript运算符——位运算符全面介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
WEB页子窗口(showModalDialog和showModelessDialog)使用说明，大家可以看下。2009-10-10
这篇文章主要介绍了浅谈JavaScript中的字符编码转换问题,是JS入门学习中的基础知识,需要的朋友可以参考下2015-07-07
最新评论