一、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时,就会调用函数,从而显示选中的内容。