本节继续介绍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. 试水 Egret ：TouchEvent与EnterFrame相关

    由于Egret是照着ActionScript的api去做的,且TS就是JS,JS和AS都是兄弟语法,同属于ECMAScript语法系的,所以我就直接测试了的. 如下: var sp:egret.Spr ...

  2. Cocos2dx 学习笔记整理----在项目中使用图片（一）

    cocos2dx有多种使用图片的方法,先来个最简单的:用CCSprite直接使用图片. 首先,进入到之前建立的项目,把你将要使用的图片放入到目录下的Resources文件夹里面.项目中以相对路径使用资 ...

  3. MySQL的IP处理函数inet_aton()和inet_ntoa()

    给出一个作为字符串的网络地址的"点地址"(如127.0.0.1)表示,返回一个代表该地址数值的整数.地址可以是4或8比特地址. mysql> SELECT inet_aton ...

  4. Spring动态数据源的配置

    Spring动态数据源 我们很多项目中业务都需要涉及到多个数据源,就是对不同的方法或者不同的包使用不同的数据源.最简单的做法就是直接在Java代码里面lookup需要的数据源,但是这种做法耦合性太高, ...

  5. 10.8.5如何升级(app store 出错 请稍后重试 100)

    出现问题:苹果以前的老版本,OS X 10.8或是10.8.5在当年提示你升级,你又任性没升级的时候,拖过那阵,你再想升级,就是各种报复.进app store下载或是更新东西都是弹出app stpre ...

  6. STM32_IAP详解(有代码,有上位机)

    Iap,全名为in applacation programming,即在应用编程,与之相对应的叫做isp,in system programming,在系统编程,两者的不同是isp需要依靠烧写器在单片 ...

  7. 使用Emacs中的org-mode写cnblogs之图片插入

    .title { text-align: center; margin-bottom: .2em } .subtitle { text-align: center; font-size: medium ...

  8. Linux内核配置浅析

    1.Linux Kernel Kconfig系统的基本结构 Linux内核的配置系统由三个部分组成,分别是: 1>.Makefile:分布在 Linux 内核源代码根目录及各层目录中,定义 Li ...

  9. 数字（数学）操作类 Math Random 类 ，大数字操作类

    Math 提供了大量的数学操作方法 Math类中所有的方法都是static 方法

  10. 绕过网站安全狗拦截，上传Webshell技巧总结（附免杀PHP一句话）

    这篇文章我介绍一下我所知道的绕过网站安全狗上传WebShell的方法. 思路是:修改HTTP请求,构成畸形HTTP请求,然后绕过网站安全狗的检测. 废话不多说,切入正题.... 1.实验环境: Win ...