Javascript标准DOM Range操作全集第1/3页

更新时间：2007年01月09日 00:00:00 作者：

2级DOM定义了一个createRange()方法，如果是按照DOM此标准的浏览器（IE并不是支持此标准的，但是IE里的属性或方法却远比标准中定义的多得多），它属于document对象，所以创建一个range对象要这样做：

var oRange = document.createRange();

如果你要检测你的浏览器是否支持此标准Range对象，可以用hasFeature()方法来检测：

var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0");
if (supportsDOMRange) {
var oRange = document.createRange();
//range code here
}
Range对象进行简单的选择
最简单用Range进行选择，用selectNode()或者selectNodeContents()方法，这两个方法只有一个接收参数，一个DOM节点。

selectNode()方法选择全部节点，包括它的孩子，而selectNodeContents()选择的节点只是它的孩子。如

<p id="p1"><b>Hello</b> World</p>
<script>
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
oRange1.selectNode(oP1);
oRange2.selectNodeContents(oP1);
</script>

oRange1和oRange2包含上面所说的两种方法，但是看了下面的示图相信你能很快明白这两个方法的区别：

当你创建了一个Range对象时，Range实例就会有以下的属性：
startContainer — 返回range对象从何开始的节点对象（父节点的第一个节点）
startOffset — 返回Range开始的偏移量(offset)，如果startContainer是一个文本节点，注释节点，或者是CDATA节点，这个属性返回文本的偏移量，否则返回第一个节点的索引。
endCOntainer — 返回Range对象最后一个节点对象（父节点的最后一个节点）
endOffset — 返回Range结束时的偏移量(offset)特性与startOffset相同。
commonAncestorContainer — 返回第一个包含该Range对象的节点。

注：这些属性均为只读属性(read-only)，startOffset和endOffset将在下文中有较详细的解释。

下面这段代码将说明这些属性，请在Mozilla firefox里运行（支持此标准的浏览器——DOM2级，IE里将无效）：

<html>
<head>
<title>DOM Range Example</title>
<script type="text/javascript">
function useRanges() {
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
oRange1.selectNode(oP1);
oRange2.selectNodeContents(oP1);

document.getElementById("txtStartContainer1").value
    = oRange1.startContainer.tagName;
document.getElementById("txtStartOffset1").value =
    oRange1.startOffset;
document.getElementById("txtEndContainer1").value =
    oRange1.endContainer.tagName;
document.getElementById("txtEndOffset1").value =
    oRange1.endOffset;
document.getElementById("txtCommonAncestor1").value =
    oRange1.commonAncestorContainer.tagName;
document.getElementById("txtStartContainer2").value =
    oRange2.startContainer.tagName;
document.getElementById("txtStartOffset2").value =
    oRange2.startOffset;
document.getElementById("txtEndContainer2").value =
    oRange2.endContainer.tagName;
document.getElementById("txtEndOffset2").value =
    oRange2.endOffset;
document.getElementById("txtCommonAncestor2").value =
    oRange2.commonAncestorContainer.tagName;
}
</script>
</head>
<body><p id="p1"><b>Hello</b> World</p>
<input type="button" value="Use Ranges" onclick="useRanges()" />
<table border="0">
<tr>
<td>
<fieldset>
<legend>oRange1</legend>
Start Container:
    <input type="text" id="txtStartContainer1" /><br />
Start Offset:
    <input type="text" id="txtStartOffset1" /><br />
End Container:
    <input type="text" id="txtEndContainer1" /><br />
End Offset:
    <input type="text" id="txtEndOffset1" /><br />
Common Ancestor:
    <input type="text" id="txtCommonAncestor1" /><br />
</fieldset>
</td>
<td>
<fieldset>
<legend>oRange2</legend>
Start Container:
    <input type="text" id="txtStartContainer2" /><br />
Start Offset:
    <input type="text" id="txtStartOffset2" /><br />
End Container:
    <input type="text" id="txtEndContainer2" /><br />
End Offset:
    <input type="text" id="txtEndOffset2" /><br />
Common Ancestor:
    <input type="text" id="txtCommonAncestor2" /><br />
</fieldset>
</td>
</tr>
</table>
</body>
</html>

上面的代码将不作注释了，有什么问题，在评论中留言。

Range中还有一些其它的方法：
setStartBefore(node) — 设置Range的相对于node节点的起始位置
setStartAfter(node) — 同上
setEndBefore — 设置Range的相对于node节点的结束位置
setEndAfter — 同上

12 3 下一页阅读全文

您可能感兴趣的文章:

js转义字符介绍
有时候js得到json串中含有"<"和">" ，那么两个尖括号中间的文字是无法在html页面显示出来的，必须用转义字符
2013-11-11
javascript 数组的正态分布排序的问题
这篇文章主要介绍了javascript 数组的正态分布排序的问题的相关资料,需要的朋友可以参考下
2016-07-07
javascript深拷贝的几种情况总结
这篇文章主要为大家介绍了javascript深拷贝的几种情况，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
浅谈JavaScript编程语言的编码规范
本文浅谈 JavaScript 编程中关于编码规范的问题，分析其中缘由。希望引起更多 Web 开发人员对 JavaScript 编码规范问题的关注和对软件产品质量问题的重视
2011-10-10
浅析JS原型继承与类的继承
下面小编就为大家带来一篇浅析JS原型继承与类的继承。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-04-04
JavaScript闭包详解
本文详细介绍了javascript闭包，十分的详尽，推荐给有需要的小伙伴参考下。
2015-02-02
JS方法调用括号的问题探讨
JS方法调用括号的问题很是令人头疼，下面有个不错的示例，感兴趣的朋友可以参考下
2014-01-01
JavaScript数据类型判定的总结笔记
这篇文章主要给大家分享的是JavaScript数据类型判定，感兴趣的朋友可以参考下
2015-07-07
前端 el-table 本地搜索的实现代码
这篇文章主要介绍了前端 el-table 本地搜索的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-08-08
三张图带你搞懂JavaScript的原型对象与原型链
这篇文章介绍了JavaScript的原型对象与原型链，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07