关于range对象的selectNodeContents、selectNode、deleteContents方法
示例代码如下:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="div" style="background-color:rosybrown;width:500px;height:200px;">这里有文字</div>

    <input type="button" onclick="deleteContent(true)" value="删除内容">

    <input type="button" onclick="deleteContent(false)" value="删除元素">

    <script>

        function deleteContent(test) {

            var div=document.getElementById("div");

            var range=document.createRange();

            if (test){

                range.selectNodeContents(div);

                range.deleteContents();

            }else{

                range.selectNode(div);

                range.deleteContents();

            }

        }

    </script>

</body>

</html>

[H5]range对象之selectNode等方法的更多相关文章

  1. [H5]range对象的setStart/setEnd方法

    1.setStart:表示某个节点的range对象的起点位置;2.setEnd:表示某个节点的range对象的结束位置; 示例如下:<body> <div id="div& ...

  2. [H5]range对象的createRange方法

    range对象的extractContents()方法: extractContents() 方法删除文档内容,并以 DocumentFragment 对象的形式返回它; DocumentFragme ...

  3. [H5]range对象的clone方法

    clone:range对象的克隆; <body> <p id="p">这是一段文字</p> <button onclick="b ...

  4. html5学习笔记4--API Range对象(一)

    Range对象基本用法 效果图如下(在谷歌浏览器下的展示)

  5. HTML5中的Range对象的研究

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  6. HTML5 编辑 API 之 Range 对象（一）

     一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...

  7. HTML5中的Range对象的研究（转载）

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  8. [html5] 学习笔记-编辑 API 之 Range 对象（一）

    1.Range对象的基本概念 一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. <!DOCTYPE html> <html> & ...

  9. 理解HTML5中Range对象

    1.理解Range对象    重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~  什么是Range对象? 在H ...

随机推荐

  1. ARP欺骗分析

    (作者原创,欲转载请说明出处)1.arp介绍    arp:地址解析协议;将IP地址映射为MAC地址.2.为什么要有arp    平时上网我们都知道要有一个IP地址才能上网,那arp用来干嘛的呢?如果 ...

  2. C/C++中对链表操作的理解&&实例分析

    链表概述 链表是一种常见的重要的数据结构.它是动态地进行存储分配的一种结构.它可以根据需要开辟内存单元.链表有一个“头指针”变量,以head表示,它存放一个地址.该地址指向一个元素.链表中每一个元素称 ...

  3. js通过Date获取日期

    获取当前系统时间 var myDate = new Date();//获取系统当前时间 获取特定格式日期 myDate.getYear(); //获取当前年份(2位) myDate.getFullYe ...

  4. CSS3-loading动画（四）

    图片看的效果真是不行,还是戳下面网址看吧 在线示例:http://liyunpei.xyz/loading.html 十七.效果十七 三个小球,纵向居中,间距撑开,依次改变小球的translateY的 ...

  5. POJ 2195 Going Home （带权二分图匹配）

    POJ 2195 Going Home (带权二分图匹配) Description On a grid map there are n little men and n houses. In each ...

  6. nodejs-ORM 操作数据库中间件waterline的使用

    waterline和Sails.js同一团队开发,支持几乎所有的主流数据库,是nodejs下一款非常强大的orm,可以显著提升开发效率 一.waterline支持的数据库 二.waterline的配置 ...

  7. java封装性、继承性及关键字

    方法的参数传递(重点.难点)1.形参:方法声明时,方法小括号内的参数   实参:调用方法时,实际传入的参数的值 2.规则:java中的参数传递机制:值传递机制 1)形参是基本数据类型的:将实参的值传递 ...

  8. 加减号改变input[type=number]的数值,基于[zepto.js]

    通过点击加减号可以更改input的数值,样式如下图: 具体的html代码如下: <div class="xh-lxx-cart-count1"> <span cl ...

  9. 【转载】接触Matlab10年后的一个总结，随时使用Matlab要掌握的一些要点

    来源: http://www.cnblogs.com/asxinyu/p/Basic_Matlab_Experience.html 接触Matlab10年后的一个总结,随时使用Matlab要掌握的一些 ...

  10. 配置ssh免密码登录——集群学习日记

    度过了难熬的考试月时期之后,最近和小伙伴一起参加的的比赛进入了紧张的准备时期.在进行工作的时候,发现有很多基础的知识点,自己不是很清楚以及了解,所以在想,要不就边学习的时候边写下学习日记,以供自己后来 ...