本节继续介绍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. ecos的app包管理

    install 安装 install app_name1 app_name2 有时候要用-o参数,把所有安装过程需要的参数带入进去(安装过程的参数放在app/$app_name/task.php里in ...

  2. CodeForces 617E XOR and Favorite Number

    莫队算法. #include<cstdio> #include<cmath> #include<cstring> #include<algorithm> ...

  3. source command not found in sh shell解决办法

    在Ubuntu系统中执行脚本的时候突然出现错误"source command not found in sh shell" 这个其实在Ubuntu 当中 执行脚本默认的使用的是da ...

  4. (简单) POJ 1511 Invitation Cards，SPFA。

    Description In the age of television, not many people attend theater performances. Antique Comedians ...

  5. 3DTouch简单了解

    3D Touch的三大模块 代码Demo:https://github.com/haozheMa/3DTouch 在我们的app中使用3D Touch功能,主要分为以下三个模块: 1.Home Scr ...

  6. javascript DOM 学习总结 (1)

    摘自javascript DOM编程艺术 1.首先介绍DOM的三个字母的含义: 1.1  D 如果没有document(文档),DOM 也无从谈起,当创建了一个网页并把他加载到web浏览器中时,DOM ...

  7. mysql root密码

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...

  8. php 模式

    设计模式1.单例模式类的计划生育1.让该类在外界无法造对象2.让外界可以造一个对象,做一个静态方法返回对象3.在类里面通过静态变量控 class Dog { static $dx; public $t ...

  9. 搭建NDK环境

    2014.07.14 搭建OK,但是目前只能手动编译c代码,具体不清楚.

  10. java实现——035第一个只出现一次的字符

    import java.util.Hashtable; public class T035 { public static void main(String[] args) { FirstNotRep ...