基本概念

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. python+Django+test 测试数据库生成报错

    前提: 使用Django自带的test进行单元测试. 问题描述: 运行:python manage.py test,报错,出现数据库乱码的现象,报错如下: Creating test database ...

  2. API权限设计总结

    最近在做API的权限设计这一块,做一次权限设计的总结. 1. 假设我们需要访问的API接口是这样的:http://xxxx.com/openapi/v1/get/user/?key=xxxxx& ...

  3. 区块链入门(5)Truffle 项目实战,Solidity IDE, 智能合约部署

    在上一张我们学习了Truffle项目的创建,部署等相关内容,今天我们就来实战一下. 今天我们要做3件事: 1) 学习搭建一个Solidity IDE(Remix). 2) 使用这个Solidity I ...

  4. 第七周博客作业 <西北师范大学| 周安伟>

    第七周博客作业 助教博客链接:https://home.cnblogs.com/u/zaw-315/ 本周无评作业 查看了同学们提交的对实验四的附加实验项目互评.其中对博文结构,内容来评价是否符合作业 ...

  5. Java8-函数式接口理解及测试

    1.  函数式接口的理解 根据重构的思想,需要把容易变化的模块进行抽象并封装起来,从这个点来看,Java8新引入的函数式接口就是基于这个思想进行设计的. 2. 函数式接口定义 2.1 自定义如下 需要 ...

  6. js-当前时间转换

    new Date().toLocaleString() 数组转换过后

  7. python的单元测试unittest模块

    首先需要导入unittest模块 import unittest import  HTMLTestRunner # TestCase 也就是测试用例## TestSuite 多个测试用例集合在一起,就 ...

  8. php判断用户是否关注微信公众号

    方法一: <?php     $access_token = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_cr ...

  9. 创建Dynamic Web Project时 显示最新Apache Tomcat 8.0 的方法

    创建Dynamic Web Project时  显示最新Apache Tomcat  8.0 等的方法 解决办法如下: 第一步:eclipse菜单help->eclipse marketplac ...

  10. Taro-ui TabBar组件使用路由跳转

    1. 安装taro-ui (此处使用cnpm) cnpm install taro-ui 2. 全局引入样式 app.scss sass :@import "~taro-ui/dist/st ...