Range对象

最新推荐文章于 2023-05-04 14:58:55 发布

chentian888

最新推荐文章于 2023-05-04 14:58:55 发布

阅读量2.1k

点赞数

分类专栏： JS知识点整理文章标签：对象 Range range对象 js-range js-range对象

本文链接：https://blog.csdn.net/JSCTO/article/details/52698811

版权

本文详细介绍了DOM中的Range对象，包括其属性、方法，如定位、编辑等，以及在不同浏览器下的兼容性处理。通过示例展示了如何使用Range对象进行文本选择、删除、克隆和插入等操作。

摘要由CSDN通过智能技术生成

一、Range对象

属性

属性值	说明
Range.collapsed	用于判断Range对象所代表的区域的开始点与结束点是否处于相同的位置，如果相同该属性值返回true
Range.commonAncestorContainer	用于返回Range对象所代表的区域位于什么节点之中，该属性值为包含了该区域的最低层节点(一个节点可能是一个元素，也可能是一段完整文字)的节点
Range.endContainer	用于返回Range对象所代表的区域的终点位于什么节点之中，该属性值为包含了该区域终点的最底层节点
Range.endOffset	用于返回Range对象所代表的区域的终点与包含该终点的节点的起点之间的距离
Range.startContainer	用于返回Range对象所代表的区域的起点位于什么节点之中，该属性值为包含了该区域起点的最底层节点
Range.startOffset	用于返回Range对象所代表的区域的起点与包含该起点的节点的起点之间的距离

方法

1、定位方法

方法	说明
Range.setStart()	用于将某个节点中的某处位置指定为Range对象所代表区域的起点位置
Range.setEnd()	用于将某个节点中的某处位置指定Range对象所代表区域的结束位置
Range.setStartBefore()	用于将某个节点的起点位置指定为Range对象所代表区域的起点位置
Range.setStartAfter()	用于将某个节点的终点位置指定为Range对象所代表区域的起点位置
Range.setEndBefore()	用于将某个节点的起点位置指定为Range对象所代表区域的终点位置
Range.setEndAfter()	用于将某个节点的终点位置指定为Range对象所代表区域的终点位置
Range.selectNode()	用于将Range对象的起点指定为某个节点的起点，将Range对象的终点指定为该节点的终点，使Range对象所代表的区域中包含该节点Range
Range.selectNodeContents()	用于将Range对象的起点指定为某个节点中的所有内容的起点，将Range对象的终点指定为该节点所有内容的终点，使Range对象所代表的区域中包含该节点的所有内容
Range.collapse()	向指定端点折叠该Range

2、编辑方法

方法	说明
Range.cloneContents()	用于在页面上追加一段HTML代码，并且将Range对象所代表区域中的HTML代码克隆到被追加的html代码中
Range.deleteContents()	用于将Range对象中所包含的内容从页面中删除
Range.extractContents()	用于将Range对象所代表区域中的html代码克隆到一个DocumentFragment对象中，然后从页面中删除这段HTML代码
Range.insertNode()	用于将指定的节点插入到某个Range对象所代表的区域中，插入位置为Range对象所代表区域的起点位置
Range.surroundContents()	将 Range 的内容移动到一个新的节点中

3、其他方法

方法	说明
Range.compareBoundaryPoints()	比较两个 Range 的端点。
Range.cloneRange()	返回拥有和原 Range 相同端点的克隆 Range 对象。
Range.detach()	从使用状态释放 Range，此方法用于改善性能
Range.toString()	把Range内容作为字符串返回

4、Gecko方法

在这里解释Mozilla独有的，在W3C DOM标准里没有的 Range方法

方法	说明
Range.compareNode()	返回常量，表示node是否在range的前、后、中、外
Range.comparePoint()	返回-1、0、1，分别表示指定点在range的前、中、后
Range.createContextualFragment()	解析指定字符串（XML或HTML），并返回document fragment
Range.intersectsNode()	返回boolean值，表示指定Node是否横断Range
Range.isPointInRange()	返回boolean值，表示指定点是否在range中

document.selection和document.getSelection()/window.getSelection()分别为IE 和w3c浏览器创建selection对象
document.createTextRange()和document.createRange()分别为IE和w3c浏览器创建range对象
document.selection.createRange()和window.getSelection().getRangeAt(0)是从selection对象获得range对象

标准dom是从window中获取selection对象，而ie是从document对象中获取。
标准dom range对象(以下称dom rang)和ie的TextRange对象(以下称TextRange),在操作模式上有很大区别，可以说domrange是基于dom结构控制的，TextRange是基于文本节点字节控制的

二、Range对象的概念

Range对象代表页面上的一段连续区域，通过Range对象，可以获取或修改页面上的任何区域，可以通过如下创建一个空的Range对象，如下：
var range = document.createRange()

在html5中，每一个浏览器窗口及每一个窗口中都有一个selection对象，代表用户鼠标在页面中所选取的区域，(注意：经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象

   var  selection = document.getSelection();
   var  selection  = window.getSelection();

每一个 selection对象都有一个或者多个Range对象，每一个range对象代表用户鼠标所选取范围内的一段连续区域，在firefox中，可以通过 ctrl键可以选取多个连续的区域，因此在firefox中一个selection对象有多个range对象，在其他浏览器中，用户只能选取一段连续的区域，因此只有一个range对象。
可以通过selection对象的getRangeAt方法来获取selection对象的某个Range对象，如下：
var range = document.getSelection().getRangeAt(index)

function getRange(selection) {
   
    if (selection.getRangeAt) {
        return selection.getRangeAt(0);
    } else { //不支持getRangeAt的情况
        var range = document.createRange();
        range.setStart(selection.anchorNode, selection.anchorOffset);
        range.setEnd(selection.focusNode, selection.focusOffset);
        return range;
    }
}