HTML5中的API概览

整理一下HTML5中的常见API。

前言

HTML5中提供了一些功能强大的API，在不考虑兼容性的情况下，比起原生js实现更加简单，比起jQuery可以少引入包，这里整理几个常用的。

一、获取页面元素及类名操作和自定义属性

1. 获取页面元素

●　document.querySelector(“选择器”);

选择器：可以是css中的任意一种选择器

通过该选择器只能选中第一个元素。

●　document.querySelectorAll(“选择器”);

与document.querySelector区别：querySelectorAll 可以选中所有符合选择器规则的元素，返回的是一个列表。querySelector返回的只是单独的一个元素。

Document

• 第一个

• 第二个

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[自定义属性名]=值

设置自定义属性

4. 小案例

二、文件读取

使用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. 代码实现

文件读取

4. 小案例

三、获取网络状态

1. 获取网络状态方法

// 获取当前网络状态

var state = window.navigator.onLine;

if (state) {

alert("您好，当前处于联网状态");

} else {

alert("当前处于断网状态");

}

2. 网络状态事件

// 当联网的时候触发该事件

window.ononline = function () {

alert("在线");

}

// 当断网的时候触发该事件

window.onoffline = function () {

alert("断网");

}

四、获取地理位置

1. 获取一次当前位置

// 只能获取一次当前地理位置信息

window.navigator.geolocation.getCurrentPosition(success, error);

function success (msg) {

console.log(msg);

}

function error (msg) {

console.log(msg);

}

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);

}

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画布

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