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 ...
随机推荐
- 利用redis实现分布式锁知识点总结及相关改进
利用redis实现分布式锁知识点总结及相关改进 先上原文,本文只为总结及对相关内容的质疑并提出若干意见,原文内容更详细https://www.cnblogs.com/linjiqin/p/800383 ...
- Java框架spring Boot学习笔记（八）：@PropertySource，@Value注解
获取配置文件 忽略配置文件不存在时报错
- centos 7 开机yum
yum -y install net-tools yum -y install wget
- oracle中的exists 和 in 用法详解
以前一直不知道exists和in的用法与效率,这次的项目中需要用到,所以自己研究了一下.下面是我举两个例子说明两者之间的效率问题. 前言概述: “exists”和“in”的效率问题,涉及到效率问题也就 ...
- 阅读笔记：JAVA - chapter 1 & 2
static 即使没有创建对象,也能调用这个方法. 当Static method, static变量有定义,不同对象将指向同一存储空间,将其初始化. 存储方式 寄存器 堆栈:对象引用,需要知道存活多久 ...
- MySqlBulkLoader设置Columns时要注意的地方
在测试时发现有的表用MySqlBulkLoader一直加不上数据,经过检查,原来是因为表中的列名跟MYSQL的一个关键词对上了,所以在执行时把列名当做关键词进行处理了. LOAD DATA LOCAL ...
- 关于js中操作数组的一些方法
网上找的通篇看了一遍讲的很透收藏了! 转自(https://www.cnblogs.com/blogs-8888/p/6518683.html) 1.锁定数组的长度(让数组的长度变成只读). 1 2 ...
- py文件的运行
安装过程及配置 安装过程准备: 下载好Python的安装程序后,开始安装,在进入安装界面后一定确保勾选将Python加入到系统环境变量的路径里.如图所示: 2 如果没有选取,那么按照下面的步骤进行操作 ...
- SHELL脚本学习-练习写一个脚本4
#编写一个脚本时,自动生成”#!/bin/bash”这一行和相关注释信息. 把以下的代码保存为一个sh文件,比如test.sh , 新建脚本是使用 bash test.sh newfile 即可. ...
- 使用PYTHON完成排序（堆排序）
class HeapStructure: def __init__(self, ls): self.ls = ls def shift_up(self, index): # 上移使符合堆要求 if i ...