HTML5 中的 API 概览
# HTML5 中的 API 概览
整理一下 HTML5 中的常见 API。
# 📖. 前言
HTML5 中提供了一些功能强大的 API,在不考虑兼容性的情况下,比起原生 js 实现更加简单,比起 jQuery
可以少引入包,这里整理几个常用的。
# 一. 获取页面元素及类名操作和自定义属性
# 1. 获取页面元素
document.querySelector(“选择器”);
- 选择器:可以是 css 中的任意一种选择器
- 通过该选择器只能选中第一个元素。
document.querySelectorAll(“选择器”);
- 与
document.querySelector
区别:querySelectorAll
可以选中所有符合选择器规则的元素,返回的是一个列表。querySelector
返回的只是单独的一个元素。
- 与
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>
<p>
<span>第一个</span>
</p>
</li>
<li>
<span>第二个</span>
</li>
</ul>
<script type="text/javascript">
document.querySelector("li span").style.color = "red";
var obj = document.querySelectorAll("li span");
for (var i = 0; i < obj.length; i++) {
obj[i].innerText = i + '. ' + obj[i].innerText;
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 2. 类名操作
Dom.classList.add(“类名”);
- 给当前dom元素添加类样式。
Dom.classList.remove(“类名”);
- 给当前dom元素移除类样式。
classList.contains(“类名”);
- 检测是否包含类样式。
classList.toggle(“active”);
- 切换类样式(有就删除,没有就添加)。
# 3. 自定义属性
HTML5规范,自定义属性在标签中的名称为:data-自定义属性名
Dom.dataset.属性名
或者Dom.dataset[属性名]
- 获取自定义属性
Dom.dataset
返回的是一个对象 - 注意:此处属性名不包含
data-
- 获取自定义属性
Dom.dataset.自定义属性名=值
或Dom.dataset[自定义属性名]=值
- 设置自定义属性
# 二. 文件读取
使用 HTML5 的 File 接口需要先新建文件读取对象:
var reader = new FileReader();
1
# 1. FileReader 方法
FileReader 有 3 个用来读取文件的方法:
.readAsText(file)
— 将文件读取为文本.readAsDataURL(file)
— 将文件读取为DataURL(二进制流形式) -.readAsBinaryString(file)
— 将文件读取为二进制编码
# 2. FileReader 事件
.onload
— 资源读取完毕 reader.result.onprogress
— 读取进度更新时触发.onloadstart
— 加载开始时触发 -.onloadend
— 加载结束时触发.onerror
— 出现错误时触发.onabort
— 加载过程中中止时触发 -.abort
— 手动中止加载
# 3. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件读取</title>
</head>
<body>
<input type="file" name="">
<script type="text/javascript">
var input_file = document.querySelector("input");
input_file.onchange = function () {
var files = this.files;
var file = files[0];
// 创建读取器
var reader = new FileReader();
// 将数据读取成二进制方式
// reader.readAsBinaryString(file);
// reader.onload=function(){
// console.log(reader.result);
// }
// 将数据读取成文本形式
// reader.readAsText(file);
// reader.onload=function(){
// console.log(reader.result);
// }
//将数据读取成url形式
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
}
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 4. 小案例
# 三. 获取网络状态
# 1. 获取网络状态方法
// 获取当前网络状态
var state = window.navigator.onLine;
if (state) {
alert("您好,当前处于联网状态");
} else {
alert("当前处于断网状态");
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 2. 网络状态事件
// 当联网的时候触发该事件
window.ononline = function () {
alert("在线");
}
// 当断网的时候触发该事件
window.onoffline = function () {
alert("断网");
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 四. 获取地理位置
# 1. 获取一次当前位置
// 只能获取一次当前地理位置信息
window.navigator.geolocation.getCurrentPosition(success, error);
function success (msg) {
console.log(msg);
}
function error (msg) {
console.log(msg);
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2. 实时获取当前位置
window.navigator.geolocation.watchPosition(success,error);
// 实时获取地理位置:
window.navigator.geolocation.watchPosition(success, error);
function success (msg, position) {
console.log(msg);
console.dir(position);
}
function error (msg) {
console.log(msg);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 3. 小案例
# 五. 本地存储
传统方式我们以 document.cookie
来进行存储,但是由于其存储大小只有 4k 左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案,使用 sessionStorage
和 localStorage
存储数据。
# 1. localStorage
- localStorage 特点:
- 永久生效
- 多窗口共享
- 容量大约为 20M
- 用法:
window.localStorage.setItem(key,value)
— 设置存储内容window.localStorage.getItem(key)
— 获取内容window.localStorage.removeItem(key)
— 删除内容window.localStorage.clear()
— 清空内容
# 2. sessionStorage
- sessionStorage 特点:
- 生命周期为关闭当前浏览器窗口
- 可以在同一个窗口下访问
- 数据大小为5M左右
- 用法:
window.sessionStorage.setItem(key,value)
— 设置存储内容window.sessionStorage.getItem(key)
— 获取内容window.sessionStorage.removeItem(key)
— 删除内容window.sessionStorage.clear()
— 清空内容
# 六. 操作多媒体
# 七. Canvas 画布
先不整理,用到的时候再进行学习
上次更新: 2022/07/01, 17:34:19