一、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. Pythonic八荣八耻

    以动手实践为荣 , 以只看不练为耻; 以打印日志为荣 , 以单步跟踪为耻; 以空格缩进为荣 , 以制表缩进为耻; 以单元测试为荣 , 以人工测试为耻; 以模块复用为荣 , 以复制粘贴为耻; 以多态应用 ...

  2. U3D Transform组件

    Variables position Vector3类型,物体位置,相对于世界坐标系的值.就是矩阵的最后一行的值. localPosition Vector3类型,物体相对于父元素的位置. euler ...

  3. Linux系统编程@终端IO

    Linux系统中终端设备种类  终端是一种字符型设备,有多种类型,通常使用tty 来简称各种类型的终端设备.终端特殊设备文件一般有以下几种: 串行端口终端(/dev/ttySn ) ,伪终端(/dev ...

  4. jQuery.form.js使用

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 下载地址 百度云:http://pan.baidu.com/s/1eQoYE46 360云:http://yu ...

  5. Share Point 创建 TimerJob

    public class SyncMetadataJob:SPJobDefinition { private const string JobName = @"Metadata Sync J ...

  6. webbrowser在不同的.netframework版本差异

    这几在做一个浏览器的自动化下载的工具,发现自己做的demo和做的项目代码运行不一致,代码就那么几行,拷贝过去为什么有些行为就不一样呢?经过分析发现原来有.net4.0和.net2.0中的webbrow ...

  7. NET软件开发中的事务大全

      各种事务很全啊. 原文地址:http://www.cnblogs.com/ltp/archive/2009/06/17/1505304.html     1 .NET开发中的事务处理大比拼 之 S ...

  8. oracle-asm,acfs

    两个类比asm与lvm比较asm实例与oracle实例比较 ASM是OMF的一个扩展,通过ASM和OMF的结合,oracle在上层将数据文件进行自我管理,在底层将存储进行自我管理.同时,ASM模式下, ...

  9. [NOIp 1998 提高组]Probelm 2 连接多位数【2011百度实习生笔试题】

    /*====================================================================== [NOIp 1998 提高组]Probelm 2 连接 ...

  10. 【转】C#安装包(自动卸载低版本)

    一:版本号升级 1.ProductCode.Version(version比前一版本要高比如以前1.0.0现在就是1.0.1),     2.保持UpgradeCode不变(当设置RemovePrev ...