html对象编辑,HTML5编辑API之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参数的值判断用户是否选取了内容；

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

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

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

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

range

function rangeTest() {

var html;

var showRangeDiv=document.getElementById("showRange");

var selection=document.getSelection();

if(selection.rangeCount>0){

html="您选取了"+selection.rangeCount+">段内容
"

for(var i=0;i

var range=selection.getRangeAt(i);

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

}

showRangeDiv.innerHTML=html;

}

}

Selection与Range对象的使用

最后编辑：2016-12-19作者：sunny5156

喜欢技术....