html中range类型的定义,HTML5中的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参数的值判

用户是否选取了内容；

1、当用户没有按下鼠标时候，该参数的值为0.

2、当用户按下鼠标的时候，该参数值为1.

3、当用户使用鼠标同时按住ctrl键时选取了一个或者多个区域时候，该参数值代表用户选取区域的数量。

4、当用户取消区域的选取时，该属性值为1，代表页面上存在一个空的Range对象；

如下代码测试：

selection对象与range对象的使用实例

JS代码如下：

function rangeTest() {

var html,

showRangeDiv = document.getElementById("showRange"),

selection = document.getSelection();

if(selection.rangeCount > 0) {

html = "你选取了" + selection.rangeCount + "段内容
";

for(var i = 0; i < selection.rangeCount; i++) {

var range = selection.getRangeAt(i);

html += "第" + (i + 1) + "段内容为：" + range + "
";}

showRangeDiv.innerHTML = html;

}

}

如上代码，当用户选取一段文字后，点击按钮，会显示选取的文字，如下在firefox下效果：

在chrome浏览器下如下所示：

二、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();

我们下面来做一个demo，来理解下上面的三个方法；如下代码：

元素中的内容

删除内容

删除元素

页面上显示如下：

JS代码如下：

function deleteRangeContents(flag) {

var div = document.getElementById("div");

var rangeObj = document.createRange();

if(flag) {

// selectNodeContents指选中Range对象中的所有内容 进行删除掉

rangeObj.selectNodeContents(div);

rangeObj.deleteContents();

}else {

rangeObj.selectNode(div);

rangeObj.deleteContents();

}

}

当代码执行完document.createRange();时候，我们看看rangeObj对象的值是多少

当点击删除内容的时候，就把相应的内容删掉；如下所示：

代码执行到下面的，rangeObj对象的值变成如下：

当我们点击删除元素的按钮时候，如