本节继续介绍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. web项目编译出错时，原因之一，可能是build path 中order and Export引起

    build path中的order and Export,如果两个libarary中有相同功能的jar包,则编译器会选择顺序在前的jar包中相应的类作为编译所需. 所以,当项目jar包较多的时候,如果 ...

  2. Android 的Camera架构介绍

    http://java-admin.iteye.com/blog/452464   第一部分 Camera概述Android的Camera包含取景器(viewfinder)和拍摄照片的功能.目前And ...

  3. 转发：Xcode插件

    古人云“工欲善其事必先利其器”,打造一个强大的开发环境,是立即提升自身战斗力的绝佳途径!以下是搜集的一些有力的XCode插件.   1.全能搜索家CodePilot 2.0 你要找的是文件?是文件夹? ...

  4. 无源RS232转RS485（转）

    源:无源RS232转RS485 RS232  -485转换器主要包括了电源.232电平转换.485电路三部分.本电路的232电平转换电路采用了NIH232或者也可以直接使用MAX232集成电路,485 ...

  5. php的几个内置的函数

    // 取得所有的后缀为PHP的文件 $files = glob(‘*.php’); print_r($files); j

  6. CodeForces 617D Polyline

    无脑暴力判断. #include<cstdio> #include<cstring> #include<vector> #include<cmath> ...

  7. [DNS]ACL、also-notify、视图服务器及安全设置

    1. ACL :访问控制列表放在named.conf的头部,如果acl的内容太多,可以另创建一个文件,将acl放在该文件中,再在主配置文件named.conf用include 将文件加载进来(记得放在 ...

  8. (简单) POJ 1860 Currency Exchange，SPFA判圈。

    Description Several currency exchange points are working in our city. Let us suppose that each point ...

  9. (简单) POJ 3126 Prime Path，BFS。

    Description The ministers of the cabinet were quite upset by the message from the Chief of Security ...

  10. C++异常(exception)第一篇--综合讲解

    摘要:catch(exception &ex)是捕获所有标准库定义中的类std:exception;catch(...)则是捕获所有的异常. 1.简介 异常是由语言提供的运行时刻错误处理的一种 ...