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、多媒体