很多时候，我们要通过js向文本输入框(textarea)里添加内容，这些内容有部分文字需要直接选择，然后方便用户修改。这时候就需要用到对象Range。
这时我们就需要使用到range对象了，下面是IE,firefox,opera浏览器下Range对象的详细介绍。
通常，Range代表用户的一个选择区域。本文集中于获得用户的选择区域，以及把选择区域转化为一个W3C的Range对象，或者微软IE的TextRange对象。当然，我们也可以使用编程的方式创建Range对象。
1、Range对象是什么?
一 个Range是一个HTML文档的任意一部分。它可以在任何一点开始和结束，开始点和结束点甚至可能相同（Range为空）。通常，Range是用户的文 本选择区域。用户一旦选择了HTML页面的一部分文本，就可以把这段文本转化成一个Range对象。当然，也可以编程定义。
一旦创建了Range对象，我们就可以通过它对所选文本或者html内容进行拷贝、修改或者删除操作。
如果用户选择的区域是包括HTML标签的HTML片段，大部分浏览器都可以自动补全该区域片段，这样用户原本选择的不合法的（标签不对应）HTML片段，通过Range对象拷贝或者移动的时候，会按照补全之后合法的片段处理。
2、不同浏览器的比较（请参考原文），http://www.quirksmode.org/dom/w3c_range.html
3、访问用户选择区域
在利用用户产生的Range对象的时候，首先要访问用户选择区域。这需要分别处理：IE使用微软的方式，其他浏览器使用FF的方式。如下：
var userSelection;
if (window.getSelection) {
userSelection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
userSelection = document.selection.createRange();
}
注 意：在Mozilla, Safari 和 Opera浏览器中userSelection是一个Selection对象，而在IE中却是TextRange对象。这种不同在其余的代码中也是存在 的，也就是说，IE的TextRange不同于Mozilla的Selection和W3C的Range对象，后续的代码必须针对IE和其他浏览器单独处 理。
处理的顺序需要注意，Mozilla的Selection应该首先处理，原因是Opera浏览器支持这两个对象 （Selection和TextRange），如果你使用window.getSelection()来读取用户选择区域, Opera创建一个 Selection对象，而如果 使用document.selection它就会创建一个Text Range对象。同时，因为Opera对Mozilla的Selection支持得非常好，而对微软的Text Range却差强人意，所以首先通过window.getSelection()方法检测把Opera当作标准浏览器是最好的。也就是说对上述代码首先按 照Selection对象处理就可以兼顾Opera。
4、userSelection对象内容
userSelection对 象就是mozilla的Selection对象或者IE的TextRange对象。然而，userSelection所指向的mozilla的 Selection对象在W3C的标准浏览器中也包含用户的文本内容（不是HTML）。所以，为了获得与微软的TextRange对象一样的文本信息，你 必须使用userSelection.text。这样来读取用户选择的文本信息：
var selectedText = userSelection; if (userSelection.text) selectedText = userSelection.text;
5、从Selection对象来创建Range对象
大多情况下，你希望Range对象就代表用户选择区域。在微软IE模式下已经是这样了，userSelection就是一个Text Range对象，然而，在W3C的标准浏览器下，userSelection仍然是一个Selection对象。创建Range对象，我们要这么处理：
var rangeObject = getRangeObject(userSelection);
function getRangeObject(selectionObject) {
if (selectionObject.getRangeAt)
return selectionObject.getRangeAt(0);
else { // Safari!
var range = document.createRange();
range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
return range;
}
}
理想情况下，我们使用Selection的getRangeAt()方法来访问W3C标准浏览器的Range对象。这个方法在给定索引的位置创建Range对象。通常，在js脚本中，第一个Range具备index 0。
6、编程的方式创建Range
不幸的是， Safari (1.3)不支持 getRangeAt()方法。所以，我们必须创建一个新的Range对象，使其跨度和用户选择的一样。这是非常有用的经验，它可以教你如何创建自己的Range对象。
var range = document.createRange(); var startPar = [the p node]; var endLi = [the second li node]; range.setStart(startPar,13); range.setEnd(endLi,17);
7、读取Selection的起始点
很 不幸，当处理用户选择区域时，我们不知道该用户选择了页面的那个部分。所以，必须读出用户选择区域的起始点。这在Selection对象中必须处理，因为 还没有Range对象。我们说过，Range对象用4个属性来定义它的起始点，Selection对象也有类似的4个属性，分别是 anchorNode/anchorOffset定义起点，focusNode/focusOffset 定义末点。
range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset); range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
