HTML5中的API概覽

整理一下HTML5中的常見API。

前言

HTML5中提供了一些功能強(qiáng)大的API，在不考慮兼容性的情況下，比起原生js實(shí)現(xiàn)更加簡單，比起jQuery可以少引入包，這里整理幾個(gè)常用的。

一、獲取頁面元素及類名操作和自定義屬性

1. 獲取頁面元素

●　document.querySelector(“選擇器”);

選擇器：可以是css中的任意一種選擇器

通過該選擇器只能選中第一個(gè)元素。

●　document.querySelectorAll(“選擇器”);

與document.querySelector區(qū)別：querySelectorAll 可以選中所有符合選擇器規(guī)則的元素，返回的是一個(gè)列表。querySelector返回的只是單獨(dú)的一個(gè)元素。

Document

• 第一個(gè)

• 第二個(gè)

2. 類名操作

●　Dom.classList.add(“類名”);

給當(dāng)前dom元素添加類樣式。

●　Dom.classList.remove(“類名”);

給當(dāng)前dom元素移除類樣式。

●　classList.contains(“類名”);

檢測是否包含類樣式。

●　classList.toggle(“active”);

切換類樣式(有就刪除，沒有就添加)。

3. 自定義屬性

HTML5規(guī)范，自定義屬性在標(biāo)簽中的名稱為：data-自定義屬性名

●　Dom.dataset.屬性名 或者 Dom.dataset[屬性名]

獲取自定義屬性 Dom.dataset 返回的是一個(gè)對象

注意：此處屬性名不包含data-

●　Dom.dataset.自定義屬性名=值 或 Dom.dataset[自定義屬性名]=值

設(shè)置自定義屬性

4. 小案例

二、文件讀取

使用HTML5的File接口需要先新建文件讀取對象：

var reader = new FileReader();

1. FileReader方法

FileReader有3個(gè)用來讀取文件的方法：

●　.readAsText(file)　　— 將文件讀取為文本

●　.readAsDataURL(file)　　— 將文件讀取為DataURL(二進(jìn)制流形式)

●　.readAsBinaryString(file)　　— 將文件讀取為二進(jìn)制編碼

2. FileReader事件

●　.onload　　— 資源讀取完畢 reader.result

●　.onprogress　　— 讀取進(jìn)度更新時(shí)觸發(fā)

●　.onloadstart　　— 加載開始時(shí)觸發(fā)

●　.onloadend　　— 加載結(jié)束時(shí)觸發(fā)

●　.onerror　　— 出現(xiàn)錯(cuò)誤時(shí)觸發(fā)

●　.onabort　　— 加載過程中中止時(shí)觸發(fā)

●　.abort　　— 手動中止加載

3. 代碼實(shí)現(xiàn)

文件讀取

4. 小案例

三、獲取網(wǎng)絡(luò)狀態(tài)

1. 獲取網(wǎng)絡(luò)狀態(tài)方法

// 獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)

var state = window.navigator.onLine;

if (state) {

alert("您好，當(dāng)前處于聯(lián)網(wǎng)狀態(tài)");

} else {

alert("當(dāng)前處于斷網(wǎng)狀態(tài)");

}

2. 網(wǎng)絡(luò)狀態(tài)事件

// 當(dāng)聯(lián)網(wǎng)的時(shí)候觸發(fā)該事件

window.ononline = function () {

alert("在線");

}

// 當(dāng)斷網(wǎng)的時(shí)候觸發(fā)該事件

window.onoffline = function () {

alert("斷網(wǎng)");

}

四、獲取地理位置

1. 獲取一次當(dāng)前位置

// 只能獲取一次當(dāng)前地理位置信息

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

function success (msg) {

console.log(msg);

}

function error (msg) {

console.log(msg);

}

2. 實(shí)時(shí)獲取當(dāng)前位置

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

// 實(shí)時(shí)獲取地理位置:

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

function success (msg, position) {

console.log(msg);

console.dir(position);

}

function error (msg) {

console.log(msg);

}

3. 小案例

五、本地存儲

傳統(tǒng)方式我們以document.cookie來進(jìn)行存儲，但是由于其存儲大小只有4k左右，并且解析也相當(dāng)?shù)膹?fù)雜，給開發(fā)帶來諸多不便，HTML5規(guī)范則提出解決方案，使用sessionStorage和localStorage存儲數(shù)據(jù)。

1. localStorage

localStorage特點(diǎn)：

① 永久生效

② 多窗口共享

③ 容量大約為20M

用法：

●　window.localStorage.setItem(key,value)　　— 設(shè)置存儲內(nèi)容

●　window.localStorage.getItem(key)　　— 獲取內(nèi)容

●　window.localStorage.removeItem(key)　　— 刪除內(nèi)容

●　window.localStorage.clear()　　— 清空內(nèi)容

2. sessionStorage

sessionStorage特點(diǎn)：

① 生命周期為關(guān)閉當(dāng)前瀏覽器窗口

② 可以在同一個(gè)窗口下訪問

③ 數(shù)據(jù)大小為5M左右

用法：

●　window.sessionStorage.setItem(key,value)　　— 設(shè)置存儲內(nèi)容

●　window.sessionStorage.getItem(key)　　— 獲取內(nèi)容

●　window.sessionStorage.removeItem(key)　　— 刪除內(nèi)容

●　window.sessionStorage.clear()　　— 清空內(nèi)容

六、操作多媒體

七、Canvas畫布

先不整理，用到的時(shí)候再進(jìn)行學(xué)習(xí)

總結(jié)

以上是生活随笔為你收集整理的html5中api有什么,HTML5中的API概览的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。