一、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. jQuery中过滤选择器first和first-child的区别

    :first过滤器只匹配第一个子元素,而:first-child过滤器将为每个父元素匹配个子元素. 对于下面html代码: <ul> <li>John</li> & ...

  2. 【P1326】超级教主

    DP优化 原题: LHX教主很能跳,因为Orz他的人太多了.教主跳需要消耗能量,每跳1米就会消耗1点能量,如果教主有很多能量就能跳很高.教主为了收集能量,来到了一个神秘的地方,这个地方凡人是进不来的. ...

  3. dump java

    http://www.gamlor.info/wordpress/2011/09/visualvm/ https://visualvm.java.net/zh_CN/gettingstarted.ht ...

  4. PHP-线程一直不释放调试

    一.现象 1.查看进程是否存在 ps -ef | grep -v 'grep' |grep -E 'shell/cron/bonus/cash' www      2624    1  0 Oct24 ...

  5. C#学习之LinqtoSql类的简单例子

    LinqtoSql类把访问.操作数据库的细节封装了起来,把连接操作数据库变得相当简单.下面是简单的例子. 第一步:添加LinqtoSql类 1.创建一个控制台应用程序项目,下载一个NrothWind ...

  6. 【Hadoop】搭建完全分布式的hadoop

    博客已转移,请借一步说话! http://www.weixuehao.com/archives/577 下面博文已更新,请移步 ↑ 用于测试,我用4台虚拟机搭建成了hadoop结构 我用了两个台式机. ...

  7. Oracle的rownum原理和使用

    整理和学习了一下网上高手关于rownum的帖子: 参考资料:  http://tech.ddvip.com/2008-10/122490439383296.html 和 http://tenn.jav ...

  8. win7 关于远程桌面登陆的方法，相应服务的启动

    转自:http://blog.csdn.net/ningfuxuan/article/details/7519476 远程登陆电脑,对远程电脑的设置 (1)首先要启动远程电脑中的Remote Desk ...

  9. MySQL5.7.13源码编译安装指南（转)

    系统 CenterOs 6.5 1.安装依赖包(cmake make gcc等,其实好多都有了,不需要更新,为了防止世界被破坏,就装下) yum install gcc gcc-c++ -yyum i ...

  10. java将office文档pdf文档转换成swf文件在线预览

    第一步,安装openoffice.org openoffice.org是一套sun的开源office办公套件,能在widows,linux,solaris等操作系统上执行. 主要模块有writer(文 ...