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 ...
随机推荐
- office2016产品密钥
office2016专业增强版产品密钥: VL批量授权版:QCKNG-29MKJ-74G4B-X7DT8-JFHBB(亲测有效) office2016专业增强版密钥(Retail零售版),可电话激活 ...
- supervisorctl安装使用文档
1.apt-get install supervisor下载或者pip install supervisor(因为supervisor是python写的)supervisor和python项目没有关系 ...
- React Router的Route的使用
Route 是 React Router中用于配置路由信息的组件,每当有一个组件需要根据 URL 决定是否渲染时,就需要创建一个 Route. 1) path 每个 Route 都需要定义一个 pat ...
- Django之CBV\FBV
FBV(function base views) 就是在视图里使用函数处理请求. 写一个FBV的实例:在views中代码 :就是写了个函数 def book(request): ''' :param ...
- 区间求小于等于k的数字个数 hdu4177
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4417 题目意思给出一个序列,叫我们求一个区间里面小于等于k的数字个数. 这里面我用分块和主席树两种方法 ...
- Spring 文件上传MultipartFile 执行流程分析
在了解Spring 文件上传执行流程之前,我们必须知道两点: 1.Spring 文件上传是基于common-fileUpload 组件的,所以,文件上传必须引入此包 2.Spring 文件上传需要在X ...
- margin-top / padding-top 的百分比 到底是多少？
之前,我以为 margin-top/padding-top 如果设置成%,得到的是 基于父对象总高度的百分比. 但是,这种想法是错的.因为在CSS标准里,是基于父对象宽度的百分比. <style ...
- SQL Server 2008 通过C# CLR 使用正则表达式
参考文章 MSSQLSERVER接入c#clr程序集,使c#函数变sql函数 正则表达式30分钟入门教程 SQL中采用Newtonsoft.Json处理json字符串 操作步骤 1.新建项目-> ...
- django 富文本编辑器
创建工程,数据中数据格式设置为 models.TextField() 此时编辑器是普通的文本框. 使用 tinymce .安装 django-tinymce pip install django-ti ...
- Vue添加请求拦截器
一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...