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. 是否使用安全模式启动word

          打开word,出现了一个提示,显示着“word遇到问题需要关闭.我们对此引起的不便表示抱歉.”下面有选项“恢复我的工作并重启word”,选中它.点下面的“不发送”.      在出现的提示 ...

  2. 使用intelliJ创建 spring boot + gradle + mybatis站点

    Spring boot作为快速入门是不错的选择,现在似乎没有看到大家写过spring boot + gradle + mybatis在intellij下的入门文章,碰巧.Net同事问到,我想我也可以写 ...

  3. box-shadow阴影详解

    每次使用box-shadow,都要查阅资料才能实现对应的效果,现在总结一下,方便以后查看. 使用语法: element{box-shadow: inset x-offset y-offset blur ...

  4. MySQL触发器更新和插入操作

    一.触发器概念 触发器(trigger):监视某种情况,并触发某种操作,它是提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,它的执行不是由程序调用,也不是手工启动 ...

  5. elasticsearch REST API方式批量插入数据

    elasticsearch REST API方式批量插入数据 1:ES的服务地址  http://127.0.0.1:9600/_bulk 2:请求的数据体,注意数据的最后一行记得加换行 { &quo ...

  6. 51nod_1298:圆与三角形（计算几何）

    题目链接 判断圆和三角形是否相交   可以转化为   判断三条线段是否和圆相交 #include<iostream> #include<cstdio> #include< ...

  7. 文本三剑客---gawk基础

    gawk程序是Unix中原始awk程序的GNU版本.gawk程序让流编辑器迈上了一个新的台阶,它提供了一种编程语言而不只是编辑器命令.在gawk编程语言中,可以完成下面的事情: (1)定义变量来保存数 ...

  8. RobotFramwork安装报错name 'execfile' is not defined

    安装RobotFramwork的时候,提示了这个?是什么原因呢? 本机装的是python3.6: 经官方回复得知识因为python的版本不兼容该模块的安装. 官方认定版本是2.7,所以这里推荐大家玩p ...

  9. koa2 use里面的next到底是什么

    koa2短小精悍,女人不爱男人爱. 之前一只有用koa写一点小程序,自认为还吼吼哈,知道有一天某人问我,你说一下 koa或者express中间件的实现原理.然后我就支支吾吾,好久吃饭都不香. 那么了解 ...

  10. 了解Java并学会创建Java项目（一个菜鸟的成长历程）

    计算机语言分类:了解 1)低级语言:更接近于计算机的语言 1.1)机器语言:由0和1组成的 1.2)汇编语言:有一些助记符号2)高级语言:更接近于人的语言 2.1)面向过程的:C... 2.2)面向对 ...