本节继续介绍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. 多线程编程--- __thread关键字

    __thread是GCC内置的线程局部存储设施,存取效率可以和全局变量相比.__thread变量每一个线程有一份独立实体,各个线程的值互不干扰.可以用来修饰那些带有全局性且值可能变,但是又不值得用全局 ...

  2. hibernate---树状映射

    总公司--分公司1, 分公司2 分公司1: 分公司1下部门1, 分公司1下部门2 分公司2: Org.java: package com.bjsxt.hibernate; import java.ut ...

  3. （四）Jquery Mobile表单

    Jquery Mobile表单与列表 一.JM表单      1.表单      普通html表单            效果:          2.只能输入数字的表单           效果:  ...

  4. PHP获取当期前运行文件的路径，名字，服务器路径

    <?phpecho "显示脚本文件的相对路径和文件名:\"".$_SERVER["PHP_SELF"]."\"<br& ...

  5. find命令--xargs--exec

    find命令 1.1.find命令选项-name 按照文件名查找-perm 按照文件权限来查找-prune 可以使用find命令排除当前文件夹,不查找-user 可以按照文件属主来查找-group 可 ...

  6. FTP服务器中vsftpd主配置文件解析

    /etc/vsftpd/vsftpd.conf#################匿名权限控制############### anonymous_enable=YES #是否启用匿名用户no_anon_ ...

  7. nginx location配置（URL）

    语法规则: location [=|~|~*|^~] /uri/ { … }= 表示精确匹配,这个优先级也是最高的^~ 表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url ...

  8. artTemplate-3.0（与项目实际结合）

    引入artTemplate.js <script type="text/javascript" src="${ctx}/assets/plugins/artTemp ...

  9. iOS中正则表达式的三种使用方式

    1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: NSString *email ＝ @“nijino_saki@163.com”: NSString *regex = @"[ ...

  10. 《数据结构与算法分析：C语言描述》读书笔记------List的C语言实现

    List的简单实现.在GCC下测试通过. list.h #ifndef _List_H /*List数据结构的简单实现*/ struct Node; typedef struct Node Node; ...