基本概念

Range对象代表页面上的一段连续的区域。通过Range对象，可以获取或修改网页上的任何区域。

Selection与Range对象的使用

<body>

    <script>

        function rangeTest() {

            var html;

            showRangeDiv=document.getElementById("showRange");

            selection=document.getSelection();

            if(selection.rangeCount>0){

                html="选取成功>"+selection.rangeCount+"<内容<br/>>";

                for(var i=0;i<selection.rangeCount;i++){

                    var range=selection.getRangeAt(i);

                    html+="第"+(i+1)+"段内容为："+range+"<br/>";

                }

                showRangeDiv.innerHTML=html;

            }

        }

    </script>

    Selection与Range对象的使用

    <input type="button" value="点击" onclick="rangeTest()">

    <div id="showRange"></div>

</body>

selectNodeContents和selectNode

<body>

    <script>

        function deleteRangeContent(onlyContent) {

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

            var rangeObj=document.createRange();

            if(onlyContent){

                rangeObj.selectNodeContents(div);//内容开始和内容结束

                rangeObj.deleteContents();

            }else{

                rangeObj.selectNode(div);//元素开始和元素结束

                rangeObj.deleteContents();

            }

        }

    </script>

    <div id="div" style="background-color: blueviolet;width: 300px;height: 50px">

        这里是div元素的内容

    </div>

    <button onclick="deleteRangeContent(true)">删除内容</button>

    <button onclick="deleteRangeContent(false)">删除元素</button>

</body>

HTML5的Rang对象的更多相关文章

  1. Web 前沿——HTML5 Form Data 对象的使用

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...

  2. HTML5 Form Data 对象的使用

    HTML5 Form Data 对象的使用  MDN: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Object ...

  3. Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录

    根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...

  4. 哪个HTML5内建对象用于在画布上绘制？（）

    哪个HTML5内建对象用于在画布上绘制?() getContent getContext getGraphics getCanvas 我的理解: A.C.D不存在HTML5,,js方法中 HTML 5 ...

  5. 在普通网页中如何调用html5+的plus对象

    <script> //用法: HTML5+的plus对象,必须由click事件触发后,才能在普通网页中使用.所以在没有click的情况下,调用本文件可以解决问题! //在代码中使用: pl ...

  6. Web 前沿——HTML5 Form Data 对象的使用（转）

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...

  7. 理解HTML5中Range对象

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

  8. Web 前沿——HTML5 Form Data 对象的使用

    原文地址:http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html XMLHttpRequest Level 2 添加了一个新的接口-- ...

  9. html5之history对象理解

    history对象之pushState,replaceState浏览器有一个history对象,用来保存浏览历史,用户可以通过点击浏览器的后退或前进按钮在历史记录中切换.之前对history的操作的A ...

随机推荐

  1. ElasticSearch日常使用脚本

    1.启动服务要切换到非root账户 (例子:su - elk --command="/usr/local/elk/kibana/bin/kibana serve &")2. ...

  2. 使用WebClient调用第三方接口

    需要调用一个第三方接口,传参返回数据 本来是很简单的一个需求,搞了一天没整好 首先在POSTMAN中测试没有问题,但是使用jquery ajax在前台就会涉及到跨域 虽然设置了 无论怎么写都会报错 C ...

  3. C# 一些学习作业

    下载地址:http://pan.baidu.com/s/1dEGCJdf 包括: 实现QQ旋转窗体功能 非“按角度旋转”,实现的是立体旋转. 实现QQ旋转窗体功能,窗口为不规则图像,打开时旋转180度 ...

  4. poj2182（线段树求序列第k小）

    题目链接:https://vjudge.net/problem/POJ-2182 题意:有n头牛,从1..n编号,乱序排成一列,给出第2..n个牛其前面有多少比它编号小的个数,记为a[i],求该序列的 ...

  5. Android 获取版本号名称工具类

    package com.example.grenaderose.redthunder.utils; import android.content.Context; import android.con ...

  6. XACT_ABORT选项

    XACT_ABORT选项用于指定当SQL语句出现运行时错误时,SQL Server是否自动回滚到当前事务.其语法格式如下所示: SET XACT_ABORT{ON|OFF} 当SET XACT_ABO ...

  7. 从零开始学spring cloud(九) -------- 超时机制，断路器模式介绍

    目前存在的问题: 现在我们假设一下,服务提供者响应非常缓慢,那么消费者对提供者的请求就会被强制等待,直到服务返回.在高负载场景下,如果不做任何处理,这种问题很可能造成所有处理用户请求的线程都被耗竭,而 ...

  8. jquery全选的选中和取消选中

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. 毕设之iframe跳转子页面问题

    我的Django项目中的index.html分为三个层次,head.body.footer.其中body细分为left和right两部分,right的地图是使用iframe嵌入的map.html页面, ...

  10. android 7.0+ FileProvider 访问隐私文件 相册、相机、安装应用的适配

    从 Android 7.0 开始,Android SDK 中的 StrictMode 策略禁止开发人员在应用外部公开 file:// URI.具体表现为,当我们在应用中使用包含 file:// URI ...