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. java 堆栈分析

    再次,研究了一个下午的jhat好jmap.从一开始惊呆.懵懂于那样大量而无聊乏味的数据,到现在有那么一点点收货.赶紧记录下来.没办法,悟性太低... C:\Users\Administrator> ...

  2. vi 卡住怎么办

    http://zhidao.baidu.com/question/93283359.html ---------- 我貌似好像按了ctrl+s... 用惯了windows人,会习惯性地按Ctrl+S来 ...

  3. 知方可补不足～sqlserver中使用ROW_NUMBER进行的快速分页

    回到目录 这个在SQL2005之后最见的一种分页方式,也是Linq默认生成的执行分页的方法(skip,take),当然在性能上小数量没有问题,在数据达到百万时会很慢,这是我们要清楚的,有时我们在LIN ...

  4. Atitit.eclipse 4.3 4.4  4.5 4.6新特性

    Atitit intellij idea的使用总结attilax 1. ideaIC-2016.2.4.exe1 1.1. Ij vs eclipse市场份额1 1.2. Ij的优点(方便的支持gro ...

  5. iOS-旧项目中手动内存管理(MRC)转ARC

    在ARC之前,iOS内存管理无论对资深级还是菜鸟级开发者来说都是一件很头疼的事.我参 加过几个使用手动内存管理的项目,印象最深刻的是一个地图类应用,由于应用本身就非常耗内存,当时为了解决内存泄露问题, ...

  6. Mysql 事件（定时任务）

    mysql 创建任务(事件) 1.检查数据库事件是否开启,如果 event_scheduler 等于 NO表示开启 SELECT @@event_scheduler; SHOW VARIABLES L ...

  7. html5 响应式布局

    一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为 ...

  8. 移动端IM开发需要面对的技术问题

    1.前言 这两年多一直从事网易云信 iOS 端 IM SDK的开发,期间不断有兄弟部门的同事和合作伙伴过来问各种技术细节,干脆统一介绍下一个IM APP的方方面面,包括技术选型(包括通讯方式,网络连接 ...

  9. ZOJ3805Machine(二叉树左右子树变换)

    /* 题意:建立一棵二叉树,左子树和父节点占一个宽度,右子树另外占一个宽度! 使任意左右子树交换顺序,使得整个树的宽度最小! 思路:递归交换左右子树 ! 开始写的代码复杂了,其实左右子树不用真的交换, ...

  10. PHP内核的学习--创建PHP扩展

    开始看PHP内核也有一段时间了,现在开始边学边总结,今天就总结一下如何创建自己的PHP扩展. 我的环境如下: 系统:Ubuntu 14.04 php版本:5.5.19 参考摘录:用C/C++扩展你的P ...