Range对象之cloneRange和cloneContents

代码效果如下

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

接着会显示

最后显示

以下为整个代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script>

    function selectContent()

    {

       var element=document.getElementById("divContent");

        var rangeObject=document.createRange();

        rangeObject.selectNodeContents(element);

        var objectRange=rangeObject.cloneRange()

        alert(objectRange.toString());

        var objectContent=rangeObject.cloneContents();

        alert(objectContent.toString());

       element.appendChild(objectContent);

    }

</script>

<div id="divContent">

    <p>内容</p>

</div>

<button onclick="selectContent()">选择内容</button>

</body>

</html>

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

Range对象之extractContents

效果图如下

代码如下

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script>

    function selectContent()

    {

       var element=document.getElementById("divContent");

        var elementSecond=document.getElementById("divNoContent");

        var rangeObject=document.createRange();

        rangeObject.selectNodeContents(element);

        var objectRange=rangeObject.extractContents();

        elementSecond.appendChild(objectRange);

    }

</script>

<div id="divContent" style="width:200px;height: 100px;background-color: red">

    <p>内容</p>

</div>

<div id="divNoContent" style="width:200px;height: 100px;background-color: green">

</div>

<button onclick="selectContent()">选择内容</button>

</body>

</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. 分享最新的博客到LinkedIn Timeline

    使用Octopress作为我的博客框架有两年了.使用起来一直很顺手,这个工具真正的把博客跟写代码等同起来,非常酷炫.再加上各种各样的定制化,简直是随心所欲.我针对自己的需求对Octopress框架进行 ...

  2. mysql C API的使用

    <MySQL++简介>介绍了如何使用C++来访问mysql,本文记录下使用C API访问mysql,mysql++就是对本文介绍的C-API的封装. 常用函数(名字就能告诉我们用法): M ...

  3. IOS Block-Block块的使用与理解

    在IOS中,block块是新添加的语法,其他程序语言中也被称为闭包. 程序块的理念是像任何其他C语言类型一样对待特定的代码块.程序块可以分配给一个变量,以参数的形式传递给函数或方法,当然也可以执行(不 ...

  4. JavaScript语法、对话框。分支语句

    一.用法 其所在的位置有三块,1.head里面  2.body里面  3.</html>后   一般都写在</html>后 其用法为<script></scr ...

  5. Redis学习笔记~常用命令总结

    回到目录 客户端redis-cli常用的命令总结 连接到服务器 redis-cli -h 127.0.0.1 -p 6379 --连接指定的redis服务器 发布/订阅, pub/sub模式运行在re ...

  6. Java学习之路：不走弯路，就是捷径

    1．如何学习程序设计? JAVA是一种平台,也是一种程序设计语言,如何学好程序设计不仅仅适用于JAVA,对C++等其他程序设计语言也一样管用.有编程高手认为,JAVA也好C也好没什么分别,拿来就用.为 ...

  7. atitit.事件驱动的总结attilax

    atitit.事件驱动的总结attilax Keyboard 基于的的ed 与  mouse 基础的ed Kb  base on focus ....   Mouse base on mouse mo ...

  8. Atitit.现在的常用gui技术与gui技术趋势评价总结

    Atitit.现在的常用gui技术与gui技术趋势评价总结 1. Gui俩种分类:  native 和 dsl 和 script1 2. 最好的跨平台gui技术h51 2.1. 几大技术体系(java ...

  9. Android 神兵利器—— Adb 常用命令

    总结的Android工具类文章: Android 神兵利器-- Adb 常用命令 Android 神兵利器-- Git 常用命令 Adb的全称为Android Debug Bridge,是管理andr ...

  10. 对于System.Net.Http的学习（二）——使用 HttpClient 进行连接

    对于System.Net.Http的学习(一)——System.Net.Http 简介  使用 HttpClient 进行连接 使用 System.Net.Http 命名空间中的 HttpClient ...