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. 类名操作

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. 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

# 4. 小案例

# 三. 获取网络状态

# 1. 获取网络状态方法

// 获取当前网络状态
var state = window.navigator.onLine;

if (state) {
  alert("您好，当前处于联网状态");
} else {
  alert("当前处于断网状态");
}

1
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

# 四. 获取地理位置

# 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. 实时获取当前位置

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

# 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() 　　— 清空内容

# 六. 操作多媒体

参考手册 (opens new window)

# 七. Canvas 画布

先不整理，用到的时候再进行学习

#HTML

上次更新: 2022/07/01, 17:34:19

HTML5 浏览器兼容性解决方案→