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. make file教程(转)

    最近在学习Linux下的C编程,买了一本叫<Linux环境下的C编程指南>读到makefile就越看越迷糊,可能是我的理解能不行. 于是google到了以下这篇文章.通俗易懂.然后把它贴出 ...

  2. Objective-C实现发短信和接电话

    发短信: [[UIApplication sharedApplication]openURL:[NSURL URLWithString:@"sms://10000"]]; 打电话: ...

  3. lua如何调用C++函数

    第一步是定义函数.所有在Lua中被调用的C/C++函数将使用下面一类指针进行调用: typedef int (*lua_CFunction) (lua_State *L); 换句话说,函数必须要以Lu ...

  4. [常见问题]在Linux下执行Redis命令不起作用.

    redis 127.0.0.1:6379> 这个后面无论输入什么命令都没有返回 ok 或者其他的信息,一直保持截图的状态: 解决方法:在SecureCRT中设置Options-->Sess ...

  5. Atitit图像识别的常用特征大总结attilax大总结

    Atitit图像识别的常用特征大总结attilax大总结 1.1. 常用的图像特征有颜色特征.纹理特征.形状特征.空间关系特征. 1 1.2. HOG特征:方向梯度直方图(Histogram of O ...

  6. spring之BeanFactory

    spring的IOC容器能够帮我们自动new对象,对象交给spring管之后我们不用自己手动去new对象了.那么它的原理是什么呢?是怎么实现的呢?下面我来简单的模拟一下spring的机制,相信看完之后 ...

  7. Android 4.2版本以下使用WebView组件addJavascriptInterface方法存在JS漏洞

    JS注入漏洞存在的Android版本:Android < 4.2 综述:Android的SDK中提供了一个WebView组件,用于在应用中嵌入一个浏览器来进行网页浏览.WebView组件中的ad ...

  8. MySQL5.7.13源代码阅读心得

    1.使用gdb这个调试工具. 在linux使用该调试工具非常简单.它的价值非常大,可以告诉你函数相互调用的逻辑(bt命令),告诉你函数执行的情况(通过br命令以及n,c命令单步跟踪函数每一个语句的执行 ...

  9. 快速入门系列--MVC--01概述

    虽然使用MVC已经不少年,相关技术的学习进行了多次,但是很多技术思路的理解其实都不够深入.其实就在MVC框架中有很多设计模式和设计思路的体现,例如DependencyResolver类就包含我们常见的 ...

  10. centos-lynx

    1.官网 http://lynx.isc.org 2.稳定版本 http://invisible-mirror.net/archives/lynx/tarballs/lynx2.8.8rel.2.ta ...