range对象:
是一种fragment(HTML片断)，它包含了节点或文本节点的一部分。一般情况下，同一时刻页面中只可能

有一个range，也有可能是多个range（使用Ctrl健进行多选，不过有的浏览器不允许，例如Chrome）。

可以从selection中获得range对象，也可以使用document.createRange()方法获得
1.getSelection():获取页面选中的信息;
2.rangeCount:区间数，选中几个内容;
3.selection.rangeCount;
4.selection.getRangeAt(i);

5.createRange()方法创建range对象;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>range对象</title>

</head>

<body>

    selection对象和range对象

    <input type="button" value="点击" onclick="use()">

    <div id="rangeDiv"></div>

    <script>

        function use() {

            var html;

            rangeDiv=document.getElementById("rangeDiv");

            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/>";

                }

                rangeDiv.innerHTML=html;

            }

        }

    </script>

</body>

</html>

　　

[H5]API之range对象的更多相关文章

  1. HTML5 编辑 API 之 Range 对象（一）

     一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...

  2. [html5] 学习笔记- 编辑API之Range对象（二）

    本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment ...

  3. [html5] 学习笔记-编辑 API 之 Range 对象（一）

    1.Range对象的基本概念 一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. <!DOCTYPE html> <html> & ...

  4. HTML5 页面编辑API之Range对象

    在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对 ...

  5. HTML5编辑API之Range对象

    Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = document.createRa ...

  6. HTML5 编辑 API 之 Range 对象（二）

    1.Range.cloneContents()The Range.cloneContents() returns a DocumentFragment copying the objects of t ...

  7. web前端学习（二）html学习笔记部分（3）--range对象

    1.2.8  html5编辑api之range对象(一) 1.2.8.1  Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...

  8. [H5]range对象的createRange方法

    range对象的extractContents()方法: extractContents() 方法删除文档内容,并以 DocumentFragment 对象的形式返回它; DocumentFragme ...

  9. [H5]range对象的clone方法

    clone:range对象的克隆; <body> <p id="p">这是一段文字</p> <button onclick="b ...

随机推荐

  1. Vulkan Tutorial 26 view and sampler

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 在本章节我们将为图形管线创建另外两个资源来对图像进行采样.第一个资源我们之前已经接触 ...

  2. Randoop测试类和方法（用例自动生成）

    详细使用方法见randoop官网: https://randoop.github.io/randoop/manual/index.html 测试程序之前,先检测下你的Randoop是否配置好: 打开c ...

  3. CentOS7 下使用YUM安装 MySQL5.7

    于2015年10月19日(美国时间),Oracle公司发布了开源数据库MySQL的最新版本5.7.到现在已有将近3年之久,经过这几年的改进,MySQL5.7性能最高可达前一个版本的3倍,现在官网的最新 ...

  4. The first day,I get a blogs!!

    我拥有了自己的博客,很happy! 今天学习了kvm,虽然命令行界面比较枯燥,还好不算太难,在大家的热心帮助下我创建了一个虚拟机!!

  5. 微信小程序 瀑布流布局

    今天做小程序的时候,碰到一个比较常见的需求,就是要瀑布流布局,两列,交错分布,大概如下图 最终要实现的结果就是如左图所示. 不过在微信小程序里面,不能通过JavaScript来直接操作dome,所以一 ...

  6. Memcache+cookie实现模拟session

    上一片讲到Memcached在Windows上的安装,和用Telnet工具进行命令操作,在稍微了解了原理之后,我也就开始尝试着用程序来对Memcached进行操作.这一篇分为两个部分,第一部分是用.n ...

  7. 关于SpringMVC中如何把查询数据全转成String类型

    之前,本想与客户商量做几张固定的报表予使用,结果发现客户每个月都需要各种各样的报表,所以我们做了个窗口用于直接执行SQL语句:数据量一开始并不是很大查询出来的数据较少(约1-6W左右),所以刚开始几个 ...

  8. iOS tableView刷新

    下面是我对AFN刷新一个简单的封装我们只需要传过去一个tableView就好了 简化了一些代码 #import <Foundation/Foundation.h> typedef NS_E ...

  9. 故障公告：docker swarm集群“群龙无首”引发部分站点无法访问

    今天傍晚 17:38-18:18 左右,由于 docker swarm 集群出现 "The swarm does not have a leader" 问题,造成博问.闪存.园子. ...

  10. java NIO详解

    http://zalezone.cn/2014/09/17/NIO%E7%B2%BE%E7%B2%B9/ 1. 前言 我们在写java程序的时候,为了进行优化,把全部的精力用在了处理效率上,但是对IO ...