Range对象与Selection对象

一、Range对象

一个Range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改页面上的任何区域。

 

二、Selection对象

每一个浏览器窗口及每一个窗口中的页面都具有一个selection对象，代表用户鼠标在页面中所选取的区域。

通过语句得到该Selection对象：

var selection = document.getselection();

 

三、获取页面内容实例

function rangeTest()
{
     var html;
     showRangeDiv = document.getElementById("showRange");
     selection = document.getSelection();
     if(selection.rangeCount>0)
     {
          html = "您选取了"+selection.rangeCount+"段内容<br/>";
          for(var i=0;i<selection.rangeCount;i++)
               {
                     var range = selection.getRangeAt(i);
                     html += "第"+(i+1)+"段内容为"+range+"<br/>";
                }
                showRangeDiv.innerHTML = html;
     }
}
Selection对象与Range对象使用示例
<input type = "button"  value = "点击我" onclick = "rangeTest()">
<div id = "'showRange"></div>

 

解释：

1.先用input标签创建一个Button，onclick为rangeTest()函数。

2.编写rangeTest()函数

定义html

document.getElementById  获取div的ID

document.getSelection()获取用户鼠标在页面中所选取的内容

构造if语句（如果selection.rangeCount>0，说明用户选中了内容）

构建for循环语句

selection.getRangeAt(i)

从当前selection对象中获取一个range对象

i是RangeCount的属性值

根据i返回相应的range对象

3.用户选中页面上的内容，点击Button时，就会调用函数，从而显示选中的内容。