本帖最后由 我是楠楠 于 2018-1-24 10:43 编辑
【郑州校区】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、文件读取 实例化一个读取器：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、多媒体 更多 传智播客·黑马程序员郑州校区地址 河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层 联系电话 0371-56061160/61/62 来校路线 地铁一号线梧桐街站A口出
| 
收藏
淘帖
踩
