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. JavaScript中的坑--全局变量惹得祸

    js中变量的作用域及闭包的概念   概述 身为一名程序员,因为bug周末加班是必不可少的事情,当解决bug的时候,总有些bug是因为规范导致的,但是这些bug往往不好找,也就是"前人挖坑,后 ...

  2. Wireshark网络端点和会话

    如果想让网络进行正常通信,你必须至少拥有两台设备进行数据流交互.端点(endpoint)就是指网络上能够发送和接受数据的一台设备.举例来说,在TCP/IP的通信中就有两个断电:接收和发送数据系统的IP ...

  3. 【Unity与23种设计模式】状态模式（State）

    定义: "让一个对象的行为随着内部状态的改变而变化,而该对象也像是换了类一样" 应用场景: 角色AI:控制角色在不同状态下的AI行为 服务器连接状态:开始连线.连线中.断线等状态 ...

  4. jvm003 类加载的过程

    类加载的过程 一.加载 在加载阶段虚拟机需要完成以下三件事: 通过一个类的全限定名称来获取此类的二进制字节流 将这个字节流所代表的静态存储结构转化为方法区的运行时数据结构 在内存中生成一个代表这个类的 ...

  5. 面向接口编程详解-Java篇

    相信看到这篇文字的人已经不需要了解什么是接口了,我就不再过多的做介绍了,直接步入正题,接口测试如何编写.那么在这一篇里,我们用一个例子,让各位对这个重要的编程思想有个直观的印象.为充分考虑到初学者,所 ...

  6. MySql数据库在表中添加新字段，设置主键，设置外键，字段移动位置，以及修改数据库后如何进行部署和维护的总结

    1,为当前已有的表添加新的字段 alter table student add studentName varchar(20) not null; 2,为当前已有的表中的字段设置为主键自增 alter ...

  7. 【jquery】ajax请求

    1. defferred对象 实现链式回调函数编程. http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_d ...

  8. Cubieboard Linaro 搭建超节能监控平台

    转载的,不知道原作者是谁.list很好,但我没有全部测试和验证,部分内容或已失效,如有人找到原作者的更新或者最新的心得.请告知. Cubieboard是一款ARM架构的开发板, 1GHz 的 All ...

  9. opnet点对点通信模型 分类： opnet 2014-05-26 22:15 246人阅读 评论(3) 收藏

    网络包含两个节点,一个发送节点,一个接收节点.发送节点按照某种随机的规律产生数据包(包大小和包间隔可自己定义),然后发送给接收节点.传输过程中会有一些随机的差错(误包率也可自己定义).接收节点收到正确 ...

  10. 【模板小程序】链表排序（qsort/insert_sort/merge_sort）

    前言 本文章整理了链表排序的三种方法,分别是快速排序.插入排序.归并排序.为适应不同用途,先给出常用的int版本,再在此基础上抽象出类模板. 目录 一.针对整数的版本(常用) 文中链表定义 链表相关操 ...