一：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);
getrangeat方法有一个参数index，代表该range对象的序列号；我们可以通过selection对象的rangecount参数的值判断用户是否选取了内容；
元素中的内容
这段文字是用来删除的
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
示例：
二：range对象的属性和方法
属性如下：
collapsed(boolean): 用于判断range对象所代表的区域的开始点与结束点是否处于相同的位置，如果相同该属性值返回true；
commonancestorcontainer(node): 用于返回range对象所代表的区域位于什么节点之中，该属性值为包含了该区域的最低层节点(一个节点可能是一个元素，也可能是一段完整文字)的节点。
endcontainer(node): 用于返回range对象所代表的区域的终点位于什么节点之中，该属性值为包含了该区域终点的最底层节点。
endoffset(整数值类型)：用于返回range对象所代表的区域的终点与包含该终点的节点的起点之间的距离。
startcontainer(node): 用于返回range对象所代表的区域的起点位于什么节点之中，该属性值为包含了该区域起点的最底层节点。
startoffset(整数值类型)：用于返回range对象所代表的区域的起点与包含该起点的节点的起点之间的距离。
下面还有很多方法，方法的含义比较难理解，我这边也是看到书上这么写的，顺便自己做了demo试了下，理解下其含义。以后需要使用到的可以看一下即可；
selectnode方法：range对象的selectnode方法用于将range对象的起点指定为某个节点的起点，将range对象的终点指定为该节点的终点，使range对象所代表的区域中包含该节点。使用方法如下：
rangeobj.selectnode(node);
上面的rangeobj代表一个range对象，该方法使用一个参数，代表页面中的一个节点。
selectnodecontents方法：用于将range对象的起点指定为某个节点中的所有内容的起点，将range对象的终点指定为该节点所有内容的终点，使range对象所代表的区域中包含该节点的所有内容。使用方法如下：
rangeobj.selectnodecontents(node);
含义如上所示;
deletecontents方法：用于将range对象中所包含的内容从页面中删除，使用方法如下所示：
rangeobj.deletecontents();
示例：
setstart方法用于将某个节点中的某处位置指定为range对象所代表区域的起点位置，使用方法如下：
rangeobj.setstart(node,curindex);
rangeobj代表一个range对象，该setstart方法使用2个参数，第一个参数node代表一个节点，第二个参数是一个数字，当第一个参数 node所代表的节点是一个内容为一段文字的文字节点时，该参数值用于指定将第几个文字的结束位置作为range对象所代表的区域的起点位置；当第一个参 数node所代表的节点中包括其他子节点时，该参数值用于将第几个子节点的结束位置指定为range对象所代表的区域的起点位置；
setend方法用于将某个节点中的某处位置指定range对象所代表区域的结束位置。使用方法如下所示：
rangeobj.setend(node,curindex);
该方法中的2个参数的含义如setstart方法中参数的含义相同；只不过一个是起点位置，另一个是结束位置；
示例：
setstartbefore方法：用于将某个节点的起点位置指定为range对象所代表区域的起点位置。
setstartafter方法：用于将某个节点的终点位置指定为range对象所代表区域的起点位置。
setendbefore方法：用于将某个节点的起点位置指定为range对象所代表区域的终点位置。
setendafter方法：用于将某个节点的终点位置指定为range对象所代表区域的终点位置。
使用方法如下所示：
rangeobj.setstartbefore(node);
rangeobj.setstartafter(node);
rangeobj.setendbefore(node);
rangeobj.setendafter(node);
示例：
如对本文有疑问， 点击进行留言回复！！
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）
html5 移动端视频video的android兼容(去除播放控件、全屏)
我要评论
网友评论