本节继续介绍range对象的方法，包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment,insertNode,compareBoundaryPoints,collapse,detach方法。

1、cloneRange,cloneContents,extraContents方法

cloneRange：对当前的range对象复制，返回复制的对象

 <body>
     <script>
         function cloneRange(){
             var rangeObj = document.createRange();
             rangeObj.selectNodeContents(document.getElementById("p"));
             var rangeClone = rangeObj.cloneRange();
             alert(rangeClone.toString());
         }
     </script>
     <p id="p">这里是随便书写的内容</p>
     <button onclick="cloneRange()">克隆</button>
 </body>

cloneContents：用于克隆并追加Html代码

 <body>
     <script>
         function cloneContent(){
             var div = document.getElementById("div");
             var rangeObj = document.createRange();
             rangeObj.selectNodeContents(div);
             var docFrangeMent = rangeObj.cloneContents();
             div.appendChild(docFrangeMent);
         }
     </script>
     <div id="div">
         你好吗？
         <br/>
         <button onclick="cloneContent()">克隆</button>
         <br/>
     </div>
 </body>

extraContents：将range对象的内容剪切到另一个对象中

 <body>
 <script>
     function moveContent(){
         var srcDiv = document.getElementById("srcDiv");
         var distDiv = document.getElementById("distDiv");
         var rangeObj = document.createRange();
         rangeObj.selectNodeContents(srcDiv);
         var docFragment = rangeObj.extractContents();
         distDiv.appendChild(docFragment);
     }
 </script>
     <div id="srcDiv" style="background-color:aquamarine;width: 300px;height: 50px">你好吗</div>
     <div id="distDiv" style="background-color:bisque;width: 300px;height: 50px"></div>
     <button onclick="moveContent()">移动元素</button>
 </body>

2、insertNode,compareBoundaryPoints方法

insertNode：将节点插入到range对象中

 <body>
     <script>
         function moveButton() {
             var btn = document.getElementById("button");
             var selection = document.getSelection();
             if (selection.rangeCount>0) {
                 var range = selection.getRangeAt(0);
                 range.insertNode(btn);
             }
         }
     </script>
     <div onmouseup="moveButton()" style="background-color: bisque;width: 400px">
         这里是我随便书写的一些文字这里是我随便书写的一些文字这里是我随便书写的一些文字这里是我随便书写的一些文字
     </div>
     <button id="button">按钮</button>
 </body>

compareBoundaryPoints：用于比较两个range对象的起点或终点位置

 <body>
     <script>
         function testPlace() {
             var boldText = document.getElementById("boldTest");
             var boldRange = document.createRange();
             boldRange.selectNodeContents(boldText.firstChild);
             var selection = document.getSelection();
             if (selection.rangeCount>0) {
                 var selRange = selection.getRangeAt(0);
                 if (selRange.compareBoundaryPoints(Range.START_TO_END,boldRange)<=0) {
                         alert("选取的文字在粗体前面");
                 }else{
                     if (selRange.compareBoundaryPoints(Range.END_TO_START,boldRange)>=0) {
                         alert("选取的文字在粗体后面");
                     }
                 }
             }
         }
     </script>
     这是一段文字，我也不<b id="boldTest">知道</b>写什么，随便吧
     <br/>
     <button onclick="testPlace()">位置比较</button>
 </body>

3、collapse、detach方法

collapse：将range对象所代表区域的终点移动到起点处，或者反过来

 <body>
 <script>
     var rangeObj = document.createRange();
     function selectRangeContents(){
         var div = document.getElementById("div");
         rangeObj.selectNode(div);
     }
     function unselect(){
         rangeObj.collapse(false);
     }
     function showRange(){
         alert(rangeObj.toString());
     }
 </script>
     <div id="div" style="background-color: bisque;width: 400px;height: 50px;">
         元素中的内容
     </div>
     <button onclick="selectRangeContents()">选择内容</button>
     <button onclick="unselect()">取消内容</button>
     <button onclick="showRange()">显示内容</button>
 </body>

detach:用于释放对象，释放之后，将不能再次访问该对象；通常应该释放掉不需要的range对象，以提高程序的性能。

[html5] 学习笔记- 编辑API之Range对象（二）的更多相关文章

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

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

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

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

  3. HTML5编辑API之Range对象

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

  4. HTML5 编辑 API 之 Range 对象（一）

     一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...

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

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

  6. python cookbook第三版学习笔记十一：类和对象(二)调用父类的方法

    在子类中调用父类的方法,可以下面的A.spam(self)的方法. class A(object):     def spam(self):         print 'A.spam' class ...

  7. Java学习笔记之---API的应用

    Java学习笔记之---API的应用 (一)Object类 java.lang.Object 类 Object 是类层次结构的根类.每个类都使用 Object 作为超类.所有对象(包括数组)都实现这个 ...

  8. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  9. 学习笔记：Javascript 变量 包装对象

    学习笔记:Javascript 变量 包装对象 如下代码,可以输出字符的长度. var str = "Tony"; str.length; 这时再试试以下代码,返回是 undefi ...

随机推荐

  1. (中等) CF 555E Case of Computer Network，双连通+树。

    Andrewid the Android is a galaxy-known detective. Now he is preparing a defense against a possible a ...

  2. Android中SQLite的使用

    SQLite是Android中内置的数据库,SQLite是轻量级数据库,支持标准的SQL语法,并且支持ACID事物. 在Android中提供了SQLIteOPenHelper类,帮助我们使用SQLit ...

  3. MySQL远程登陆错误

    远程连接 mySql数据库会提示10061.1045错误或 2003-Can’t connect to MySQL on ’192.168.1.2’(10061),这个原因是因为MySQL不准许远程连 ...

  4. IOS开发者证书申请及应用上线发布详解(2014版)

    其实一直以来我都想做一个最齐全的上传应用到appstore的教程,但一直狠不下心,今天凌晨2点12分,我鼓起勇气写教程,来吧不多说.登录开发者中心:http://developer.apple.com ...

  5. css(二) block，inline和inline-block概念和区别

    转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...

  6. EasyUI--datebox设置默认时间

    1. html代码: <input id="txtBeginTime" class="easyui-datebox" data-options=" ...

  7. WCF应用场景

    WCF全称Windows Communication Foundation,是Microsoft为构建面向服务的应用提供的分布式通信编程框架,是.NET Framework 3.5的重要组成部分.使用 ...

  8. A股暴跌三日市值蒸发4.2万亿 股民人均浮亏超2万

    A股暴跌三日市值蒸发4.2万亿 股民人均浮亏超2万 http://finance.qq.com/a/20150508/010324.htm?pgv_ref=aio2015&ptlang=205 ...

  9. PHP利用数组构造JSON

    问题起因 以往都是直接用构造数组的形式构造json 例子: $arr = array("A"=>"1","B"=>"2 ...

  10. 基于arm开发板四个按键控制四个灯亮

    基于s5pv2410,cortex a8的四个按键每一个按键点了对应的灯 对于用汇编来编程的话不难,重点在于数据手册,电路图,管脚的看懂 直接上代码 .globl _start_start: ldr ...