HTML5中的API概覽

整理一下HTML5中的常見API。

前言

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

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

1. 獲取頁面元素

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

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

通過該選擇器只能選中第一個元素。

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

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

Document

• 第一個

• 第二個

2. 類名操作

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

給當前dom元素添加類樣式。

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

給當前dom元素移除類樣式。

●　classList.contains(“類名”);

檢測是否包含類樣式。

●　classList.toggle(“active”);

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

3. 自定義屬性

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

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

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

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

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

設(shè)置自定義屬性

4. 小案例

二、文件讀取

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

var reader = new FileReader();

1. FileReader方法

FileReader有3個用來讀取文件的方法：

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

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

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

2. FileReader事件

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

●　.onprogress　　— 讀取進度更新時觸發(fā)

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

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

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

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

●　.abort　　— 手動中止加載

3. 代碼實現(xiàn)

文件讀取

4. 小案例

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

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

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

var state = window.navigator.onLine;

if (state) {

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

} else {

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

}

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

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

window.ononline = function () {

alert("在線");

}

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

window.onoffline = function () {

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

}

四、獲取地理位置

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. 小案例

五、本地存儲

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

1. localStorage

localStorage特點：

① 永久生效

② 多窗口共享

③ 容量大約為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特點：

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

② 可以在同一個窗口下訪問

③ 數(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畫布

先不整理，用到的時候再進行學習

總結(jié)

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

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