Range、Selection、TextRange对象的区别与关系

Range、Selection、TextRange对象的区别与关系

什么是Range

所谓Range，是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意，甚至起始点和结束点可以是一样的（也就是空Range）。最常见的Range是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义Range。每一个浏览器窗口及每一个窗口中都有一个selection对象，代表用户鼠标在页面中所选取的区域。

什么是Selection

Selection对象一般由window.getSelection()或其他方法产生。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。 如果你想了解关于其他容纳纯文本的表单元素中的选区操作。Selection对象所对应的是用户所选择的 ranges（区域），俗称拖蓝。默认情况下，该函数只针对一个区域。
Selection简单点来说就是用户通过鼠标拖拽出来的文本区域

什么是TextRange

大多情况下，你希望Range对象就代表用户选择区域。在微软IE模式下已经是这样了，userSelection就是一个TextRange对象，然而，在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;
    }
}

所以说TextRange是Range对象在IE下代表用户选择的区域document.selection.createRange()
例：获得用户选择内容

var userSelection;
if (window.getSelection) { //现代浏览器
    userSelection = window.getSelection();
} else if (document.selection) { //IE浏览器 考虑到Opera，应该放在后面
    userSelection = document.selection.createRange();
}

三者之间的关系

range和selection的关系，range是一个范围比selection宽广的对象，两者是两个完全不同的对象。虽然说range和selection是两个不同对象，但是为了好理解，可以简单的理解为range对象包含selection对象。因为，range对象可以通过selection对象来获得，即，用户只要用鼠标拖拽选中一行文本，就能通过这行选中的文本创建一个range对象。如果用户没有通过鼠标拖拽的方式选中文本，也可以通过Document 对象的createRange方法创建一个range对象，一旦创建了Range对象，我们就可以通过它对所选文本或者html内容进行拷贝、修改或者删除操作
而TextRange对象就是Range对象在IE下特殊的表现

创建Range的2种方法：

1、 通过selection创建

var selection=window.getSelection();
var range=selection.getRangeAt(0);

2、通过Document 对象的createRange方法创建

var range=document.createRange();