html5编辑API之range对象（一）

一：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参数的值判断用户是否选取了内容；

<script> function rangetest(){ var html; var showrangediv = document.getelementbyid("showrange"); var selection = document.getselection(); if(selection.rangecount > 0) { html = "你选取了段内容"; for(var i = 0; i;>
"; } showrangediv.innerhtml=html; } } </script>selection对象与range对象的使用

 

<script> function deleterangecontent(onlycontent){ var p = document.getelementbyid("p"); var rangeobj = document.createrange(); if(onlycontent) { rangeobj.selectnodecontents(p); rangeobj.deletecontents(); } else { rangeobj.selectnode(p); rangeobj.deletecontents(); } } </script>

元素中的内容

删除内容删除元素 <script> function deletechar(){ var p = document.getelementbyid("mydiv"); var textnode = p.firstchild; var rangeobj = document.createrange(); rangeobj.setstart(textnode,1); rangeobj.setend(textnode,4); rangeobj.deletecontents(); } </script>

这段文字是用来删除的

删除文字 <script> function deletefirstrow(){ var mytable = document.getelementbyid("mytable"); if(mytable.rows.length > 0){ var row = mytable.rows[0]; var rangeobj = document.createrange(); rangeobj.setstartbefore(row); rangeobj.setendafter(row); rangeobj.deletecontents(); } } </script>

第一行第一列	第一行第二列
第二行第一列	第二行第二列

删除第一行

1. 当用户没有按下鼠标时候，该参数的值为0.
2. 当用户按下鼠标的时候，该参数值为1.
3. 当用户使用鼠标同时按住ctrl键时选取了一个或者多个区域时候，该参数值代表用户选取区域的数量。
4. 当用户取消区域的选取时，该属性值为1，代表页面上存在一个空的range对象；

   示例：

    

    

   二：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);

   示例：

    

   
   
   

    

">