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 ...
随机推荐
- gradle用户目录本地库移动设置
gradle被越来越多的程序开发人员使用来构件项目代码,使用gradle依赖的第三方jar包有时候非常占空间,默认这样的用户本地库目录(缓存目录)在系统盘上,我们可以修改用户目录到其它盘上 工具/原料 ...
- mybatisplus打印sql语句
package com.osplat.config; import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor; ...
- CHROME浏览器清缓存
- Leetcode1000 合并石头的最低成本 区间DP
有 N 堆石头排成一排,第 i 堆中有 stones[i] 块石头. 每次移动(move)需要将连续的 K 堆石头合并为一堆,而这个移动的成本为这 K 堆石头的总数. 找出把所有石头合并成一堆的最低成 ...
- pwnable.kr-input-witeup
查看代码,有5个stage,一一解决掉就能愉快看到flag了. 第一个stage: 解决方案: 第二个stage: 解决方案: 使用了os.pipe()函数功能,os.pipe()用于创建一个管道,返 ...
- L2-028 秀恩爱分得快(模拟)
古人云:秀恩爱,分得快. 互联网上每天都有大量人发布大量照片,我们通过分析这些照片,可以分析人与人之间的亲密度.如果一张照片上出现了 K 个人,这些人两两间的亲密度就被定义为 1/K.任意两个人如果同 ...
- 用深信服AC控制方位话机注册链路的开、关
1.话机正常配置:专线.互联网 配置: 抓包: 结论:话机走专线注册,正常. 2.在SANGFOR AC上阻断专线地址组(域名没有找到阻断方式),模拟专线断开的场景 1)nslookup解析出地址组 ...
- Codeforces Round #552 (Div. 3) B题
题目链接:http://codeforces.com/contest/1154/problem/B 题目大意:给出n个数,每个数都可以加上或减去这个一个数D,求对这n个数操作之后当所有数都相等时,D的 ...
- centos7 安装部署zabbix
由于zabbix提供集中的web监控管理界面,因此服务在web界面的呈现需要LAMP架构支持. php 连接mysql服务,因为7版本mysql要收费,所以我们安装mariadb, 一.安装LAMP环 ...
- 监控服务器配置(一)-----Prometheus安装配置
最近和朋友一起做的监控配置,拿出来共享一下 1.下载prometheus安装包(linux版)到 /opt/minitor/prometheus . 下载地址:https://download.csd ...