Html5其它補(bǔ)充內(nèi)容---第三天

四、DOM擴(kuò)展
1、獲取元素
①document.getElementsByClassName ('class') 通過(guò)類名獲取元素，以偽數(shù)組形式存在。
②document.querySelector('selector') 通過(guò)CSS選擇器獲取元素，符合匹配條件的第1個(gè)元素。
③document.querySelectorAll('selector') 通過(guò)CSS選擇器獲取元素，以偽數(shù)組形式存在。
2、類名操作
①Node.classList.add('class') 添加class
②Node.classList.remove('class') 移除class
③Node.classList.toggle('class') 切換class，有則移除，無(wú)則添加
④Node.classList.contains('class') 檢測(cè)是否存在class
Node指一個(gè)有效的DOM節(jié)點(diǎn)，是一個(gè)通稱。
3、自定義屬性
在HTML5中我們可以自定義屬性，其格式如下data-*=""，例如
data-info="我是自定義屬性"，通過(guò)Node.dataset['info'] 我們便可以獲取到自定義的屬性值。
Node.dataset是以對(duì)象形式存在的，當(dāng)我們?yōu)橥粋€(gè)DOM節(jié)點(diǎn)指定了多個(gè)自定義屬性時(shí)，Node.dataset則存儲(chǔ)了所有的自定義屬性的值。
假設(shè)某元素 <div id="demo" data-name="itcast" data-age="10">
var demo = document.querySelector('#demo');
1、讀取自定義屬性 demo.dataset（所有的屬性及屬性值）或者 demo.dataset['age']（age屬性的值）
2、設(shè)置demo.dataset['name'] = 'web developer'
五、新增API
1、網(wǎng)絡(luò)狀態(tài)
window.online 用戶網(wǎng)絡(luò)連接時(shí)被調(diào)用
window.offline 用戶網(wǎng)絡(luò)斷開時(shí)被調(diào)用
2、全屏
Node.requestFullScreen() 開啟全屏顯示
document.cancelFullScreen() 關(guān)閉全屏顯示，只能通過(guò)document才能關(guān)閉
document.fullScreen檢測(cè)當(dāng)前是否處于全屏
全屏偽類選擇器
:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
3、文件讀取
通過(guò)FileReader對(duì)象我們可以讀取本地存儲(chǔ)的文件，使用?File?對(duì)象來(lái)指定所要讀取的文件或數(shù)據(jù)。其中File對(duì)象可以是來(lái)自用戶在一個(gè)?<input>?元素上選擇文件后返回的FileList?對(duì)象，也可以來(lái)自由拖放操作生成的??DataTransfer。
實(shí)例化一個(gè)讀取器：var reader = new FileReader();
讀取文件reader.readAsDateURL();
reader.readAsBinaryString();
reader.readAsTEXT();
事件監(jiān)聽onload 當(dāng)文讀取完成時(shí)調(diào)用
屬性result 文件讀取結(jié)果
4、拖拽
①拖拽元素：頁(yè)面中設(shè)置了draggable="true"屬性的元素，其中<img>、<a>標(biāo)簽?zāi)J(rèn)是可以被拖拽的
②目標(biāo)元素：頁(yè)面中任意的元素
③事件監(jiān)聽：根據(jù)元素類型不同，需要設(shè)置不同的事件監(jiān)聽
a拖拽元素
ondrag 應(yīng)用于拖拽元素，整個(gè)拖拽過(guò)程都會(huì)調(diào)用
ondragstart 應(yīng)用于拖拽元素，當(dāng)拖拽開始時(shí)調(diào)用，只觸發(fā)一次
ondragleave 應(yīng)用于拖拽元素，當(dāng)鼠標(biāo)離開拖拽元素時(shí)調(diào)用
ondragend 應(yīng)用于拖拽元素，當(dāng)拖拽結(jié)束時(shí)調(diào)用
b目標(biāo)元素
ondragenter 應(yīng)用于目標(biāo)元素，當(dāng)拖拽元素進(jìn)入時(shí)調(diào)用
ondragover 應(yīng)用于目標(biāo)元素，當(dāng)停留在目標(biāo)元素上時(shí)調(diào)用，
ondrop 應(yīng)用于目標(biāo)元素，當(dāng)在目標(biāo)元素上松開鼠標(biāo)時(shí)調(diào)用
ondragleave 應(yīng)用于目標(biāo)元素，當(dāng)鼠標(biāo)離開目標(biāo)元素時(shí)調(diào)用

5、地理定位
①獲取當(dāng)前地理信息（只獲取一次）
navigator. geolocation.getCurrentPosition(successCallback, errorCallback, options)
②重復(fù)獲取當(dāng)前地理信息（多次）
navigator. geolocation.watchPosition(successCallback, errorCallback, options)
當(dāng)成功獲取地理信息后，會(huì)調(diào)用succssCallback，并返回一個(gè)包含位置信息的對(duì)象position。
position.coords.latitude緯度
position.coords.longitude經(jīng)度
position.coords.accuracy精度
position.coords.altitude海拔高度
當(dāng)獲取地理信息失敗后，會(huì)調(diào)用errorCallback，并返回錯(cuò)誤信息error
可選參數(shù) options 對(duì)象可以調(diào)整位置信息數(shù)據(jù)收集方式
a) enableHighAccuracy 高精度模式 true、false
b) timeout 超時(shí)設(shè)置，單位為ms
c) maximumAge表示瀏覽器重新獲取位置信息的時(shí)間間隔，單位為ms

6、歷史管理
提供window.history，對(duì)象我們可以管理歷史記錄，可用于單頁(yè)面應(yīng)用，Single Page Application，可以無(wú)刷新改變網(wǎng)頁(yè)內(nèi)容。
①pushState(data, title, url) 追加一條歷史記錄
data對(duì)象，用于存儲(chǔ)自定義數(shù)據(jù)，通常設(shè)為null
title網(wǎng)頁(yè)標(biāo)題，基本上沒有被支持，一般設(shè)為空
url 以當(dāng)前域?yàn)榛A(chǔ)增加一條歷史記錄，不可跨域設(shè)置
②replaceState(data, title, url) 與pushState()基本相同，不同之處在于replaceState()，只是替換當(dāng)前url，不會(huì)增加/減少歷史記錄。
③事件監(jiān)聽
onpopstate事件，當(dāng)前進(jìn)或后退時(shí)則觸發(fā)，通過(guò)事件對(duì)象ev.state可以讀取到存儲(chǔ)的數(shù)據(jù)。
7、Web存儲(chǔ)（本地存儲(chǔ)）
① a、設(shè)置、讀取方便
b、容量較大，sessionStorage約5M、localStorage約20M
c、只能存儲(chǔ)字符串，可以將對(duì)象JSON.stringify() 編碼后存儲(chǔ)
②window.sessionStorage
a、生命周期為關(guān)閉瀏覽器窗口
b、在同一個(gè)窗口下數(shù)據(jù)可以共享
③window.localStorage
a、永久生效，除非手動(dòng)刪除
b、可以多窗口共享
④方法詳解
setItem(key, value) 設(shè)置存儲(chǔ)內(nèi)容
getItem(key) 讀取存儲(chǔ)內(nèi)容
removeItem(key) 刪除鍵值為key的存儲(chǔ)內(nèi)容
clear() 清空所有存儲(chǔ)內(nèi)容
key(n) 以索引值來(lái)獲取存儲(chǔ)內(nèi)容
⑤其它
WebSQL、IndexDB
8、應(yīng)用緩存
HTML5中我們可以輕松的構(gòu)建一個(gè)離線（無(wú)網(wǎng)絡(luò)狀態(tài)）應(yīng)用，只需要?jiǎng)?chuàng)建一個(gè)cache manifest文件。
①優(yōu)勢(shì)
a、可配置需要緩存的資源
b、網(wǎng)絡(luò)無(wú)連接應(yīng)用仍可用
c、本地讀取緩存資源，提升訪問(wèn)速度，增強(qiáng)用戶體驗(yàn)
d、減少請(qǐng)求，緩解服務(wù)器負(fù)擔(dān)
②緩存清單
一個(gè)普通文本文件，其中列出了瀏覽器應(yīng)緩存以供離線訪問(wèn)的資源，推薦使用.appcache為后綴名，添加MIME類型
AddType text/cache-manifest .appcache
例如我們創(chuàng)建了一個(gè)名為demo.appcache的文件，然后在需要應(yīng)用緩存在頁(yè)面的根元素(html)添加屬性manifest="demo.appcache"，路徑要保證正確。
③manifest文件格式
a、頂行寫CACHE MANIFEST
b、CACHE: 換行 指定我們需要緩存的靜態(tài)資源，如.css、image、js等
c、NETWORK: 換行 指定需要在線訪問(wèn)的資源，可使用通配符
d、FALLBACK: 換行 當(dāng)被緩存的文件找不到時(shí)的備用資源 ./online.html ./offline.html
當(dāng)online沒有用offline替換
④其他
b、可以指定多個(gè)CACHE: NETWORK: FALLBACK:，無(wú)順序限制
c、#表示注釋，只有當(dāng)demo.appcache文件內(nèi)容發(fā)生改變時(shí)或者手動(dòng)清除緩存后，才會(huì)重新緩存。
d、chrome 可以通過(guò)chrome://appcache-internals/工具和離線（offline）模式來(lái)調(diào)試管理應(yīng)用緩存
9、多媒體