Range对象之cloneRange和cloneContents

代码效果如下

首次点击“选择内容“按钮提示如下

接着会显示

最后显示

以下为整个代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <script>
  9.     function selectContent()
  10.     {
  11.        var element=document.getElementById("divContent");
  12.         var rangeObject=document.createRange();
  13.         rangeObject.selectNodeContents(element);
  14.         var objectRange=rangeObject.cloneRange()
  15.         alert(objectRange.toString());
  16.         var objectContent=rangeObject.cloneContents();
  17.         alert(objectContent.toString());
  18.        element.appendChild(objectContent);
  19.     }
  20. </script>
  21. <div id="divContent">
  22.     <p>内容</p>
  23. </div>
  24. <button onclick="selectContent()">选择内容</button>
  25. </body>
  26. </html>

看了以上代码和效果也能知道cloneRange和cloneContents的区别了，最主要的是在实际应用中体会吧.

Range对象之extractContents

效果图如下

代码如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <script>
  9.     function selectContent()
  10.     {
  11.        var element=document.getElementById("divContent");
  12.         var elementSecond=document.getElementById("divNoContent");
  13.         var rangeObject=document.createRange();
  14.         rangeObject.selectNodeContents(element);
  15.         var objectRange=rangeObject.extractContents();
  16.         elementSecond.appendChild(objectRange);
  17.     }
  18. </script>
  19. <div id="divContent" style="width:200px;height: 100px;background-color: red">
  20.     <p>内容</p>
  21. </div>
  22. <div id="divNoContent" style="width:200px;height: 100px;background-color: green">
  23. </div>
  24. <button onclick="selectContent()">选择内容</button>
  25. </body>
  26. </html>

extractContens可以实现内容提取.

html5学习笔记5--API Range对象(二)的更多相关文章

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

    本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment ...

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

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

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

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

  4. Java学习笔记之---类和对象

    Java学习笔记之---类和对象 (一)类 类是一个模板,它描述一类对象的行为和状态  例如:动物类是一个类,动物们都有属性:颜色,动物们都有行为:吃饭 public class Dog { Stri ...

  5. Qlik Sense学习笔记之Mashup开发（二）

    date: 2019-01-26 11:28:07 updated: 2019-01-26 11:28:07 Qlik Sense学习笔记之Mashup开发(二) 1.Mobile SPA UI Fr ...

  6. html5学习笔记一

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

  7. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  9. html5学习笔记4--API Range对象(一)

    Range对象基本用法 效果图如下(在谷歌浏览器下的展示)

随机推荐

  1. 《30天自制操作系统》笔记(06)——CPU的32位模式

    <30天自制操作系统>笔记(06)——CPU的32位模式 进度回顾 上一篇中实现了启用鼠标.键盘的功能.屏幕上会显示出用户按键.点击鼠标的情况.这是通过设置硬件的中断函数实现的,可以说硬件 ...

  2. java ExecutorService

    ExecutorService 通常Executor对象会创建并管理一组执行Runnable对象的线程,这组线程被称为线程池,Executor基于生产者-消费者模式.提交任务的执行者是生产者(产生待完 ...

  3. 《机器学习实战》 code debug

    摘要:最近在看<机器学习实战>,在code的过程中总是会报一些小错误,所以发下debug过的地方:由于是跳着看的,所以只是其中一部分,希望之后能把这本书我遇见的全部错误都在此更正下. 内容 ...

  4. Atitit 电子商务订单号码算法(java c# php js 微信

    Atitit 电子商务订单号码算法(java c# php js  微信 1.1. Js版本的居然钱三爷里面没有..只好自己实现了. 1.2. 订单号标准化...长度16位 1.3. 订单号的结构 前 ...

  5. Atitit 贝叶斯算法的原理以及垃圾邮件分类的原理

    Atitit 贝叶斯算法的原理以及垃圾邮件分类的原理 1.1. 最开始的垃圾邮件判断方法,使用contain包含判断,只能一个关键词,而且100%概率判断1 1.2. 元件部件串联定律1 1.3. 垃 ...

  6. 静态（static）代码块、构造代码块、构造函数、父类子类执行顺序

    静态代码块:static修饰的代码块. 在类加载-初始化的时候进行,主要目的是给变量赋予初始值 构造代码块:直接在类中定义且没有加static关键字的代码块称为构造代码块. java会把构造代码块放到 ...

  7. python导入模块和包的使用

    做项目的时候经常会要求做到模块化管理,即同样功能的代码放到同一个文件夹下,以便于方便管理,相信很多人对模块的引用都模糊不清,今天鄙人在这里就总结下. 一.模块导入的使用 在同一个文件夹下有两个文件分别 ...

  8. CentOS6.5使用createrepo搭建本地源

    本地搭建本地yum源采用的rpm全部来自CentOS-6.5-bin-DVD1&DVD2; 我的是在虚拟机环境安装,先检查我的操作系统版本: 1 2 3 4 [adam@ultraera ~] ...

  9. java集合框架之List

    一.List: 1.  特有的常见方法:(有个共性特点就是都可以操作角标) (1).添加 void add(int Index , E element):在list的指定位置插入元素 void add ...

  10. 深入理解javascript函数系列第一篇——函数概述

    × 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...