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. 用C表达面向对象语言的机制2——颠覆你对方法调用的看法！

    用C表达面向对象语言的机制2——颠覆你对方法调用的看法! 源代码在文末.推荐阅读本文PDF版,格式更好看. 在上一篇<用C表达面向对象语言的机制——C#版>中,我们获知了如何用C表达面向对 ...

  2. ASP.NET中一种超简单的Ajax解决方案

    为什么是Ajax2? 因为之前有一个blqw.Ajax,并且已经在项目中投入使用了,但是没有这个方便,这个是后来才弄的,为了纪念第一版的blqw.Ajax,所以这个就2了... 话说看了评论才发现,原 ...

  3. redis系列-redis的连接

    Redis 是完全开源免费的,遵守BSD协议,先进的key - value持久化产品.它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Map), 列表(list ...

  4. 在ubuntu上安装nodejs[开启实时web时代]

    作为一名菜鸟,竟然在centos桌面上连输入命令行的地方都找不到,是在是对不起开山祖师,最后苍天不负苦心人,在ubuntu上找见了 [安装过程参考了http://cnodejs.org/topic/4 ...

  5. SDN跟网络虚拟化的完美结合

    SDN跟网络虚拟化的完美结合 之前说过,所谓的“SDN最适合的领域是数据中心”的说法,笔者认为更准确的说法应该是SDN最适合的领域是数据中心中的网络虚拟化应用.为什么说SDN 非常适合用在网络虚拟化中 ...

  6. 发现一个百度的密码。。。记最近一段时间的php感想

    请看图. 突然想看一下百度的cookie. 最近百度一年真是多攒多难,我一直挺百度啊.百度文化就是程序员文化,但是收到中国其他文化的侵蚀,不得不变, 任何人重构系统,都会有大概百分三十左右的性能提升. ...

  7. fir.im Weekly - 如何打造 Github 「爆款」开源项目

    最近 Android 转用 Swift 的传闻甚嚣尘上,Swift 的 Github 主页上已经有了一次 merge>>「Port to Android」,让我们对 Swift 的想象又多 ...

  8. iOS----Asset Catalog的用法

    文/余书懿(简书作者)原文链接:http://www.jianshu.com/p/7aa06ce22a7b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 引言 Asset Catalo ...

  9. 关于BUG率的计算和它的实际意义的思考

    我的微信号是Shalayang,以下是我的二维码名片,欢迎添加. 问题1:bug率有什么作用? my opion:用处有很多,需要具体情况具体分析,不过主要作用一般是来评价工作产品的质量.如果bug率 ...

  10. 复杂 XML 的 序列化 反序列化

    已知.xml(再此命名default.xml)文件,请将其反序列化到一个实例对象. <?xml version="1.0" encoding="utf-8" ...