HTML5 的几种类型

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 使用示例

This div is draggable

媒体元素 、

浏览器状态管理(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 的实现。