HTML5的Rang对象
基本概念
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对象的更多相关文章
- Web 前沿——HTML5 Form Data 对象的使用
XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...
- HTML5 Form Data 对象的使用
HTML5 Form Data 对象的使用 MDN: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Object ...
- Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...
- 哪个HTML5内建对象用于在画布上绘制？（）
哪个HTML5内建对象用于在画布上绘制?() getContent getContext getGraphics getCanvas 我的理解: A.C.D不存在HTML5,,js方法中 HTML 5 ...
- 在普通网页中如何调用html5+的plus对象
<script> //用法: HTML5+的plus对象,必须由click事件触发后,才能在普通网页中使用.所以在没有click的情况下,调用本文件可以解决问题! //在代码中使用: pl ...
- Web 前沿——HTML5 Form Data 对象的使用（转）
XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...
- 理解HTML5中Range对象
1.理解Range对象 重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~ 什么是Range对象? 在H ...
- Web 前沿——HTML5 Form Data 对象的使用
原文地址:http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html XMLHttpRequest Level 2 添加了一个新的接口-- ...
- html5之history对象理解
history对象之pushState,replaceState浏览器有一个history对象,用来保存浏览历史,用户可以通过点击浏览器的后退或前进按钮在历史记录中切换.之前对history的操作的A ...
随机推荐
- 深入理解C++11【5】
[深入理解C++11[5]] 1.原子操作与C++11原子类型 C++98 中的原子操作.mutex.pthread: #include<pthread.h> #include <i ...
- GitHub下载提速
通过修改hosts文件来提速(该方法也可加速其他因为CDN被屏蔽导致访问慢的网站) 第一步:获取GitHub的IP地址 通过访问:http://tool.chinaz.com/dns或者https:/ ...
- tamptermonkey 脚本初步尝试
刚开始接触tamptermonkey 主要用于基于浏览器的数据采集 基本都是js基础 这里是采集表格里的内容, 构造json, 然后post发送到后台 如果加入定时刷新功能就可以随时或是按照固定或是随 ...
- Java基础第一天（标识符、变量）
一.标识符 Java对各种变量.类.方法命名时的字符序列. 凡自己可以起名字的地方都叫标识符. 标识符特点: 1.26个英文字母大小写,0~9,$,_ 组成. 2.数字不可以做开头. 3.不可以使用关 ...
- select2的设置选中
select2插件设置选中值并显示的问题 在select2中,要想设置指定值为选中状态并显示: $("#select2_Id").val("XXXXX").se ...
- Spring Cloud+Dubbo对Feign进行RPC改造
因为Spring Cloud Feign是基于Http Restful的调用,在高并发下的性能不够理想(虽然他是基于Ribbon以及带有熔断机制,可以防止雪崩),成为性能瓶颈,所以我们今天对Feign ...
- ztree实现中国省市区树形，可多选
首先表 CREATE TABLE `sys_area` ( `id` INT(11) NOT NULL COMMENT '编号', `parent_id` INT(11) NOT NULL COMME ...
- Synchronized和Lock的区别
①synchronized是jvm的关键字,Lock是Java类: ②synchronized会自动释放锁,而Lock需要在finally语句中主动释放锁,否则会造成死锁 ③用synchronized ...
- PostgreSQL 数据库备份
--CMD管理员进入 --进入目录: C:\Program Files\PostgreSQL\9.6\bin --备份: pg_dump -U postgres MP > C:\mptest.b ...
- 从零开始学习java（一）java基础语法
从公司裸辞一个月,原本工作是做VB的,现在想从事java:在找工作的时候总是要什么项目经验,多少有些不爽,所有语言都有共 通性,我就不信java有这么难?给自己点时间来学习.坚持一个月自学,看看自己的 ...