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. biz-NewsService

    package com.pb.news.service; import java.util.List; import com.pb.news.entity.News; public interface ...

  2. input file 上传图片问题

    html代码如下: <input id="fileup" type="file" accept="image/*" capture=& ...

  3. Struts2国际化信息机制

    国际化信息机制  (三种 Action范围. Package范围. 全局) 1. 全局国际化配置信息文件 全局国际化文件,对所有Action 生效,任何程序都可以访问到,需要在struts.xml 配 ...

  4. 几个SQL语句(备忘)

    1.三涨停 select biao1.代码,biao1.名称 from biao1,biao2,biao3 where (biao1.涨幅+ biao2.涨幅+biao3.涨幅)>0.27 an ...

  5. HDU 2255 奔小康赚大钱（带权二分图最大匹配）

    HDU 2255 奔小康赚大钱(带权二分图最大匹配) Description 传说在遥远的地方有一个非常富裕的村落,有一天,村长决定进行制度改革:重新分配房子. 这可是一件大事,关系到人民的住房问题啊 ...

  6. CJOJ 1494 【网络流24题】 搭配飞行员（二分图最大匹配）

    CJOJ 1494 [网络流24题] 搭配飞行员(二分图最大匹配) Description 飞行大队有若干个来自各地的驾驶员,专门驾驶一种型号的飞机,这种飞机每架有两个驾驶员,需一个正驾驶员和一个副驾 ...

  7. C# datatable 去重

    若检索出的datatab有重复行,而在绑定下拉列表时不希望有重复行,可使用以下代码将数据表去重: this.cmbE_NENRYOU_SBT.DataSource = dt.DefaultView.T ...

  8. PHPOffice/PHPExcel生成省市区三级联动的excel表格

    最近公司需要用到一个省市区三级联动的excel表格,但是数据都在数据库,又太多,人工不好制作,就让我这个phper来帮忙啦. 主要用到的是excel的定义名称,数据验证.其中数据验证的列表只能是一列或 ...

  9. npm介绍与cnpm介绍

    npm介绍 说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 使用npm安装插件:命令提示符执行npm instal ...

  10. MyBatis 框架的搭建和配置

    MyBatis是支持定制化SQL.存储过程以及高级映射的优秀持久层框架.MyBatis 避免了几乎所有的JDBC代码和手动设置参数以及获取结果集.MyBatis可以对配置和原生Map使用简单的xml或 ...