关于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. CSS学习（页外引用还不懂）

    CSS的语法结构为   选择符 {属性:值:}    Selector {Property : Value:} 选择符:通配 *{....}  , 元素  body{....} .h1{....}.p ...

  2. vue2.0引入腾讯地图

    百度很多东西,然后我没找到腾讯地图在VUE2.0里面的引用.于是根据找的其他地图引用资料进行尝试.步骤如下. 首先在src里面建立了TMap.js的文件,内容如下: export function T ...

  3. 拥抱.NET Core系列：Logging (1)

    在之前我们简单介绍了 .NET Core 中的 DI组件,没来及了解的童鞋可以翻翻我之前的文章. 接下来会对 .NET Core 中的 Logging 进行介绍. 本文中使用了"Micros ...

  4. Android hook神器frida（一）

    运行环境 ● Python – latest 3.x is highly recommended ● Windows, macOS, or Linux安装方法使用命令 sudo pip install ...

  5. jfinal框架新手使用之路及开发心得

    从接触jfinal这个框架到现在差不多也有一个的时间了,因为之前接触的都是像spring ,springMVC,mybatis,struts2,hibernate这种传统,大多数公司都在用的这种框架. ...

  6. FreeRTOS——内存管理

    1. 标准malloc() 和 free() 库函数的缺陷: 1)在小型的嵌入式系统中,可能不可用. 2)具体实现相对较大,占用较多宝贵的代码空间. 3)通常不具备线程安全性. 4)具有不确定性,每次 ...

  7. hdu_3336: Count the string（KMP dp）

    题目链接 题意:求给定字符串中,可以与某一前缀相同的所有子串的数量 做这道题需要明白KMP算法里next[]数组的意义 首先用一数组nex[](这里与之前博客中提到的next明显不同)存储前缀后缀最长 ...

  8. 电脑装windows与Centos双系统时引导问题

    (本文对电脑如何装windows系统和centos系统不进行详细赘述.) 电脑装双系统时,首先要安装windows系统,在硬盘中划分一块空闲的分区,用来安装centos系统(可以借助"软碟通 ...

  9. 唠一唠Linux系统入门的方法和经验

    相信大伙都听说过linux系统,然而对于这个系统,总使让新手感觉茫然,偌大的系统.下面是一段百度中的介绍: Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用 ...

  10. 有关java 8

    http://www.iteye.com/news/27608     Java 8 发布时间敲定,延期半年 http://www.iteye.com/news/24631/   Java 8 的重要 ...