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. springmvc+mybatis 做分页sql 语句

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-// ...

  2. 自定义事件解决重复请求BUG

    现在,组件化开发还是比较流行的,毕竟其优点相当突出.最近在开发一个组件的时候,遇到了一个很有意思的BUG... BUG的背景 最近在开发一个组件,好不容易开发好了转测试.然后,测试给我提了一个这样的b ...

  3. 关于在eclipse上部署Tomcat时出现8080等端口被占用问题的解决方法

    问题描述: 在eclipse中部署Tomcat时,出现如下错误. 解决方法如下: 方法一: 1.开始->cmd->输入命令netstat -ano出现下图所示(注意下边显示有些错位,最后一 ...

  4. 00002、div的文字垂直居中与背景的渐变

    1.div可以放多行的文字,当显示文字较少时,文字可垂直居中 text-align: center; display: table-cell; vertical-align: middle; text ...

  5. Java缓存框架使用EhCache结合Spring AOP

    一.Ehcache简介     EhCache是一个纯Java的进程内缓存框架,具有如下特点:     1. 快速简单,非常容易和应用集成.     2.支持多种缓存策略 .     3. 缓存数据有 ...

  6. 【WeX5学习】 后端服务之访问数据库表

    WeX5是跨段移动开发框架,将H5的标签封装成组件,实现可视化.组件化快速开发.实现一次开发,多端(iOS.安卓和微信)运行.WeX5的IDE基于Eclipse,提供了一个完全可视化.组件化.拖拽式开 ...

  7. 分享网上搜到的Oracle中对判定条件where 1=1的正解

    今天在网上找到了Oracle中对判定条件where 1=1的正解,粘贴出来和大家分享下 1=1 是永恒成立的,意思无条件的,也就是说在SQL语句里有没有这个1=1都可以. 这个1=1常用于应用程序根据 ...

  8. PHP+NGINX

    1. 下载php编译包/nginx编译包(建议先装nginx再装php, php编译包我用的是5.5.35) 2. 创建好安装目录(我的编译包放在/home下) mkdir -p /usr/local ...

  9. hdu_5964:平行四边形

    打重现赛时,一点思路也没有,然后又看到这题AC数那么少,就直接放弃了.今天重新看了看,借鉴了下别人的,发现此题应该算是一道可解题. 看上去,这题的ans是同时有两个点作为自变量的函数(然而n^2复杂度 ...

  10. Docker 中的一些概念

    笔者使用 Mac 系统玩的,所以会更多阐述 Mac 上使用的一些东西. 在安装之前有些 Docker 相关的概念需要了解一下,以便我们更好了解 Docker. 简单来说,安装 Docker 之后,会在 ...