HTML5 DOM
getElementsByClassName
遍历相关,如下左侧属性
只涉及元素节点的操作(不涉及其它节点),建议使用左侧的属性替代右侧的属性:
属性名
被替代的属性
children
childNodes
childElementCount
childNodes.length
previousElementSibling
previousSibling
nextElementSibling
nextSibling
firstElementChild
firstChild
lastElementChild
lastChild
ele.scrollIntoView()
调用 ele.scrollIntoView(), ele 元素顶端会移动到可视区域的顶端; 若传入参数 alignToTop: false, 则 ele 移到屏幕底部;
HTML5 事件
contextmenu
contextmenu 使用 demo
- 111
- 222
- 333
DOMContentLoaded
优于 window.load 执行
readystatechange
可用来判断动态载入的 script、link 标签是否加载完成。demo 如下:
const script = document.createElement(‘script’)
script.addEventListener(‘readystatechange’, function eventListener(event) {
if (event.readyState === ‘loaded’ || event.readyState === ‘complete’) { // hack 的手段,浏览器自身的问题
script.removeEventListener(‘readystatechange’, eventListener)
}
})
script.src = ‘example.js’
document.body.appendChild(script)
hashchange
HTML5 表单
input/textarea 里新增 autoFocus() 字段
表单校验 api
使用 checkValidate() 校验 required、pattern="\d+" 属性
HTML5 脚本
跨文档消息传输(XDM), 核心是 postMessage
拖放 api
拖放 api 使用示例
媒体元素 、
浏览器状态管理(history)
HTML5 存储
sessionStorage: 大小上限为 2.5Mb(不同浏览器会有差异), 页面关闭时便清空;
localStorage: 大小上限为 2.5Mb(不同浏览器会有差异), 页面关闭时不会清空;
它们的 api 也是一致的, 有如下几个:
setItem(key, value)
getItem(key)
removeItem(key)
clear()
在 HTML5 范围之外与存储相关的技术还有 cookie(存放在客户端,可以由客户端也可以由服务端生成, 大小上限为 4 kb)、IndexedDB(大小上限为 5 Mb)、cacheStorage(ServiceWorker)。
HTML5 JavaScript Api
requestAnimationFrame(callback): 表示在重绘前执行指定的回调函数,下面通过一个简单的 demo 来认识它。
let frame
function callback(timeStamp) {
console.log(timeStamp) // 开始执行回调的时间戳
// 如果想要产生循环动画的效果, 需在回调函数中再次调用 requestAnimationFrame()
requestAnimationFrame(callback)
}
frame = requestAnimationFrame(callback) // 在下次重绘之前调用回调
// 可以在销毁期的生命周期函数中执行以下函数
componentWillUnMount() {
cancelAnimationFrame(frame)
}
执行上述代码, 控制台(chrome)打印如下数据:
1795953.649
1795970.318
1795986.987
1796003.656
1796020.325
1796036.994
可以看到一帧的时间大致为 16ms。requestAnimation 不仅可以用在动画上, 更是被 React 团队用来 hack requestIdleCallback 的实现。