一、Range 对象基本概念

通过使用 Range 对象所提供的方法实现一个鼠标选取内容，通过点击按钮打印出选中内容，当然注意在不同的浏览器下可选中的内容数量是不同的。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <script>

         function rangeTest(){

             var html;

             showRangeDiv = document.getElementById("showRange");

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

                 }

                 showRangeDiv.innerHTML = html;

             }

         }

     </script>

     selection对象与range对象的使用

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

     <div id="showRange"></div>

 </body>

 </html>

 二、Range方法之SelectNode等方法

包含 SelectNode、SelectNodeContents、deleteContents 方法，通过实例来了解每一个方法的使用。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <script>

         function deleteRangeContent(onlyContent){

             var div = document.getElementById("div");

             var rangeObj = document.createRange();

             if(onlyContent){

                 rangeObj.selectNodeContents(div);

                 rangeObj.deleteContents();

             }else{

                 rangeObj.selectNode(div);

                 rangeObj.deleteContents();

             }

         }

     </script>

     <div id="div" style="background-color: aqua;width: 300px;height: 50px">

         节点中的内容

     </div>

     <button onclick="deleteRangeContent(true)">删除节点内容</button>

     <button onclick="deleteRangeContent(false)">删除整个节点</button>

 </body>

 </html>

三、Range方法之setStartsetEnd等方法

包含 setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter 方法。

四、Range 对象方法

本课时讲解通过使用 Range 对象的方法来进行复制、追加、克隆等操作。通过简单地标签，来了解 Range 对象提供的方法的使用。

五、Range 对象方法之 insertNode、compareBoundaryPoints 方法

使用 Range 对象的方法 insertNode 来进行指定节点插入某个 Range 对象所代表的区域中插入位置为 Range 对象所代表的区域的起点位置。使用 compareBoundaryPoints 方法来比较两个 Range 对象的起点位置或终点位置。

六、Range 对象方法之 collapse、detach 方法

通过使用 collapse 方法将 Range 对象所代表的区域的终点移动到该区域的起点处，或将 Range 对象所代表区域的起点移动到终点出。

HTML5 编辑 API 之 Range 对象（一）的更多相关文章

  1. HTML5编辑API之Range对象

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

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

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

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

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

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

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

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

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

  6. html5学习笔记5--API Range对象(二)

    Range对象之cloneRange和cloneContents 代码效果如下 首次点击“选择内容“按钮提示如下 接着会显示 最后显示 以下为整个代码 <!DOCTYPE html> &l ...

  7. html5学习笔记4--API Range对象(一)

    Range对象基本用法 效果图如下(在谷歌浏览器下的展示)

  8. [H5]API之range对象

    range对象:是一种fragment(HTML片断),它包含了节点或文本节点的一部分.一般情况下,同一时刻页面中只可能 有一个range,也有可能是多个range(使用Ctrl健进行多选,不过有的浏 ...

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

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

随机推荐

  1. WebStorm 使用

    Sublime 很强大,但是在项目越来越大而复杂的时候,会显得力不从心.比如函数追踪功能的确实,找个创建函数的地方很麻烦 这时候就该 WebStorm 出场了 0.无法输入中文句号.顿号等是 JDK ...

  2. Android开源框架ImageLoader的完美例子

    本文转载于:http://blog.csdn.net/wwj_748/article/details/10079311 2013年8月19日开源框架之Universal_Image_Loader学习 ...

  3. java的nio之：java的nio系列教程之DatagramChannel

    Java NIO中的DatagramChannel是一个能收发UDP包的通道.因为UDP是无连接的网络协议,所以不能像其它通道那样读取和写入.它发送和接收的是数据包. 打开 DatagramChann ...

  4. C++中的单例模式

    单例模式也称为单件模式.单子模式,可能是使用最广泛的设计模式.其意图是保证一个类仅有一个实例,并提供一个访问它的全局访问点,该实例被所有程序模块共享.有很多地方需要这样的功能模块,如系统的日志输出,G ...

  5. 论文笔记之：Deep Reinforcement Learning with Double Q-learning

    Deep Reinforcement Learning with Double Q-learning Google DeepMind Abstract 主流的 Q-learning 算法过高的估计在特 ...

  6. win7下安装配置tomcat,java运行环境

    转 http://www.cnblogs.com/pannysp/archive/2012/03/07/2383364.html 1.下载JDK,安装 官网下载地址:http://java.sun.c ...

  7. Android Facebook和Twitter分享

    1. 背景 在年初的时候,公司的项目有个新的需求,在英文版的应用中加入Facebook和Twitter分享功能. 2. 完成情况 由于这个项目比较急,所以开发这个功能从预研到接入总共耗时一周.后来,在 ...

  8. vb6通send和recv请求网络资源

    最近为了弄清楚send和recv的用法,特意用vb6测试了一下,头文件冗余的比较多: Option Explicit Private Declare Function setsockopt Lib & ...

  9. jquery 使用attr() 函数对复选框无效的原因,javascript那些事儿——properties和attributes

    复选框是网站开发的时候经常用到的网页标签之一,常见的在页面上对复选框的操作包括取值和修改复选框的状态.在jquery中,常见的操作标签的值得函数为attr,然而在操作复选框的时候,通常采用的却是pro ...

  10. 当用GridView导出Execl的时候，会发生只能在执行 Render() 的过程中调用 RegisterForEventValidation的错误

    当用GridView导出Execl的时候,会发生只能在执行 Render() 的过程中调用 RegisterForEventValidation的错误提示. 有两种方法可以解决以上问题: 1.修改we ...