Html5其它補充內容---第三天

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

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

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