html5中的Range的概念

时间：2016-07-12 21:05:13 阅读：335 评论：0 收藏：0 [点我收藏+]

标签：

最近打算给大家写一些html5入门教程，今天我们就来说说html5中的Range对象是什么。Range对象代表页面上一段连续的区域，通过Range对象可以获取或者修改页面上任何区域的内容。也可以通过Range的方法进行复制和移动页面任何区域的元素。
在Js的document文档中有一个方法用来创建一个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对象，如下：
getRangeAt方法有一个参数index，代表该Range对象的序列号；我们可以通过Selection对象的rangeCount参数的值判断用户是否选取了内容；
1.当用户没有按下鼠标时候，该参数的值为0.
2.当用户按下鼠标的时候，该参数值为1.
3.当用户使用鼠标同时按住ctrl键时选取了一个或者多个区域时候，该参数值代表用户选取区域的数量。
4.当用户取消区域的选取时，该属性值为1，代表页面上存在一个空的Range对象；
测试代码如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>meter</title></head><body>
<script>
   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;
         }
      }
</script>
<h3>selection对象与range对象的使用实例</h3>
<input type="button" value="点击我" onclick="rangeTest()"/>
<div id="showRange"></div></body></html>
效果：
QQ截图20160518203058.png

原文来自：简书／便U_Life

html5中的Range的概念

标签：

踩

(0)

评论一句话评论（0）

jiangjie190

加入时间：2016-02-19

关注此人发短消息

文章分类

默认分类（571）

“jiangjie190”关注的人------（0）

“jiangjie190”的粉丝们------（1）