一、前面的些话
本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的。这个玩意，可以让你选择HTML文档的任意部分，并可以拿这些选择的信息做你想做的事情。其中，最常见的Range是用户用鼠标选择的内容(user selection)。
本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象。
二、什么是Range？
所谓"Range"，是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意，甚至起始点和结束点可以是一样的（也就是空Range）。最常见的Range是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义Range。
例如下面这个模样的例子：
2011-04-12 负责调查切尔诺贝利核事故对人与环境造成影响的俄科学家亚布罗科夫博士指出，因福岛核电站使用的燃料较切尔诺贝利核电站多，且有反应堆使用了含有高毒性的钚的燃料，因此"福岛核电站事故可能会比切尔诺贝利带来更严重的后果"。上面选中状态的那些文字就可以转换成Range对象（下面会详细讲述）。通过Range对象你可以找到Range的起始点和结束点，如果你实在有心，还可以删除或是复制这些内容，或是用其他文字替换，甚至是简单的HTML。
上面的例子可以说是最简单的Range对象的例子，因为其只包含了文字。而实际上，Range对象也是可以包含HTML代码内容的，例如下面这个示例：
<time>2011-04-12</time> <p>据日本广播协会电视台12日报道，日本经济产业省原子能安全保安院决定将福岛第一核电站核泄漏事故等级提高至7级。这使日本核泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p> <p>负责调查切尔诺贝利核事故对人与环境造成影响的俄科学家亚布罗科夫博士指出，因福岛核电站使用的燃料较切尔诺贝利核电站多，且有反应堆使用了含有高毒性的钚的燃料，因此"福岛核电站事故可能会比切尔诺贝利带来更严重的后果"。</p>同样的，Range对象被创建，且包含HTML，现在的问题是选择的内容正好跨过了楚河和汉界（跨标签），如果就单纯的论选择的内容的话，应该如下：
泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p> <p>负责调查切尔诺贝显然，上面的HTML属于1级残废，基本无效。然而幸运的是，所有的浏览器都会自动调整HTML片段使其有效，就像变成下面这样：
<p>泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p> <p>负责调查切尔诺贝</p>可以看到，浏览器自动补全了一定数目的HTML来让Range有效。如果你复制或是移动Range，你所复制或移动的HTML内容一定是有效的。
如果您看到下面的文字，可能是由于在其他网站或是RSS中阅读本文，本文原地址：?p=1591，本文作者：张鑫旭，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。
三、浏览器的兼容性在真正操刀JavaScript之前我们需要大致知道Range对象的浏览器兼容性情况。实际上，问题是比较麻烦的，因为至少有3种类似Range对象，且你有必要全部理解。先展示详细的兼容性情况表：
支持：不支持：部分支持：
1. W3C Range W3C RangeExplorer 6/7 Firefox 2 Safari 1.3 Opera 9
cloneContents()
cloneRange()
collapse() tbd tbd tbd tbd
collapsed
commonAncestorContainer
compareBoundaryPoints()
comparePoint() – Mozilla 扩展
createContextualFragment() – Mozilla 扩展
deleteContents()
detach()
endContainer
endOffset
extractContents()
insertNode()
isPointInRange() – Mozilla 扩展
selectNode()
selectNodeContents()
setEnd()
setEndAfter()
setEndBefore()
setStart()
setStartAfter()
setStartBefore()
startContainer
startOffset
surroundContents()