关于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. Hibernate 中Hql 查询中间表的用法

    案例简述: 项目中存在User 用户表 和 Role 角色表 它们之间是多对多的关系 在User类定义中 使用hibernate注解 //角色列表 @ManyToMany(targetEntity = ...

  2. javascript 实现 对XML文件 2级/3级联动操作

    js代码 //实现对xml文档的读取:function loadXMLDoc(dname) { try // Internet Explorer { xmlDoc = new ActiveXObjec ...

  3. ISO18000-6B和ISO18000-6C(EPC C1G2)标准的区别

    ISO18000-6B和ISO18000-6C(EPC C1G2)标准的区别 日期:2009-4-2 22:10:26 目前,有两个标准可供选择.一是ISO18000-6B,另一个是已被ISO接纳为I ...

  4. Express 学习笔记纯干货（Routing、Middleware、托管静态文件、view engine 等等）

    原始文章链接:http://www.lovebxm.com/2017/07/14/express-primer/ 1. Express 简介 Express 是基于 Node.js 平台,快速.开放. ...

  5. Bash : 索引数组

    Bash 提供了两种类型的数组,分别是索引数组(indexed array)和关联数组(associative array).本文主要介绍索引数组的基本用法. 索引数组的基本特点 Bash 提供的数组 ...

  6. 跨域访问之CORS

    CORS:定义 2014年1月16日,W3C的Web应用工作组(Web Applications Working Group)和Web应用安全工作组(Web AppSec)联合发布了跨源资源共享(Cr ...

  7. POJ 3207 Ikki's Story IV - Panda's Trick（2-sat问题）

    POJ 3207 Ikki's Story IV - Panda's Trick(2-sat问题) Description liympanda, one of Ikki's friend, likes ...

  8. 原生js简单实现双向数据绑定原理

    根据对象的访问器属性去监听对象属性的变化,访问器属性不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. 访问器属性的"值"比较特殊,读取或设置访问器 ...

  9. java基础05 集合

    一.集合的由来? 我们学习Java,可以操作很多对象 ,存储 的容器有数组和StringBuffer,StringBuilder; 而数组的长度固定,所以不适合做变化的需求,Java就提供了集合供我们 ...

  10. 【转载】 ISO14229系列之一：简介

    转载链接:http://www.cnblogs.com/autogeek/p/4458591.html 前言 由于工作中经常用到ISO-14229,因此决定对该协议做个总体介绍和总结,既是对自己学习的 ...