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. JavaScript –类型之我晕

    每次写博我觉得取上恬当的题目比整篇行文都难,词量有限的情况下突然想到JavaScript拾遗应该会是一个非常文艺而夺目的博文题目,但我并没有急着使用,经验告诉我应该先去搜一下看有没有被用过.果不其然, ...

  2. Mac配置Qt环境——Could not resolve SDK path for 'macosx10.8'

    前言:解决在Mac端安装Qt后,出现的Could not resolve SDK path for 'macosx10.8'的配置信息. 首先,发现问题之前,先搜索一下.但是搜索的结果都是说,找到配置 ...

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

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

  4. java程序 启动时参数

      iEMP34:/opt/version/lktest/b030/jre/jre_linux/bin # ./java -classpath . SysInfo Exception in threa ...

  5. [开发工具]Java开发常用的在线工具

    注明: 本文转自http://www.hollischuang.com/archives/1459.作为一个Java开发人员,经常要和各种各样的工具打交道,除了我们常用的IDE工具以外,其实还有很多工 ...

  6. atitit..代码生成流程图 流程图绘制解决方案 java  c#.net  php v2

    atitit..代码生成流程图 流程图绘制解决方案 java  c#.net  php v2 1.1. Markdown 推荐,就是代码和flow都不能直接使用.1 1.2. Java code2fl ...

  7. salesforce 零基础开发入门学习（三）sObject简单介绍以及简单DML操作（SOQL）

    salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的.salesforce中的数据库使用的是Force.com 平台的数据库,数据表一行数据可以理解成一个sObject变量 ...

  8. RESTORE DATABASE的standby选项

    RESTORE DATABASE [db1] FROM DISK = N'E:\Backup\db2.bak' , MOVE N'db1_Data' TO N'D:\Data\db2.MDF', MO ...

  9. ASP.NET MVC中使用FluentValidation验证实体

    1.FluentValidation介绍 FluentValidation是与ASP.NET DataAnnotataion Attribute验证实体不同的数据验证组件,提供了将实体与验证分离开来的 ...

  10. 分享一个 C# Winfrom 下的 OutlookBar 控件的使用

    最近在上网的时候,发现了这个C# 下的 OutlookBar 控件,看了一下感觉还真不错,特此记录一下. using System; using System.Drawing; using Syste ...