# HTML5 的几种类型
该篇作为 HTML5 的一个引子，大体将 HTML5 中常用 api 作个简单分类。
# HTML5 DOM
getElementsByClassName
遍历相关，如下左侧属性
只涉及元素节点的操作(不涉及其它节点)，建议使用左侧的属性替代右侧的属性：
| col 1 | col 2 |
|---|---|
| 属性名 | 被替代的属性 |
| 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
<ul id="myMenu"style="position: absolute;visibility: hidden;background-color: silver">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
var menu = document.getElementById('myMenu')
document.addEventListener('contextmenu', (event) => {
event.preventDefault()
menu.style.left = event.clientX + 'px'
menu.style.top = event.clientY + 'px'
menu.style.visibility = 'visible'
}, false)
document.addEventListener('click', (event) => {
menu.style.visibility = 'hidden'
}, false)
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- DOMContentLoaded
优于 window.load 执行
- readystatechange
可用来判断动态载入的 script、link 标签是否加载完成。demo 如下:
constscript= 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)
2
3
4
5
6
7
8
9
- hashchange
# HTML5 表单
input/textarea 里新增
autoFocus()字段表单校验 api
使用 checkValidate() 校验 required、pattern="\d+" 属性
# HTML5 脚本
跨文档消息传输(XDM), 核心是
postMessage拖放 api
拖放 api 使用示例
<head>
<style>
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable
</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<script>
window.onload = function () {
var dragged
document.addEventListener("dragstart", function (event) {
dragged = event.target
}, false)
document.addEventListener("dragover", function (event) {
// prevent default to allow drop
event.preventDefault()
}, false)
document.addEventListener("drop", function (event) {
// prevent default action (open as link for some elements)
event.preventDefault()
if (event.target.className == "dropzone") {
dragged.parentNode.removeChild(dragged)
event.target.appendChild(dragged)
}
}, false)
}
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
媒体元素
<video>、<audio>浏览器状态管理(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 来认识它。
letframefunction callback(timeStamp) {
console.log(timeStamp) // 开始执行回调的时间戳
// 如果想要产生循环动画的效果, 需在回调函数中再次调用 requestAnimationFrame()
requestAnimationFrame(callback)
}
frame = requestAnimationFrame(callback) // 在下次重绘之前调用回调
// 可以在销毁期的生命周期函数中执行以下函数
componentWillUnMount() {
cancelAnimationFrame(frame)
}
2
3
4
5
6
7
8
9
10
执行上述代码, 控制台(chrome)打印如下数据:
1795953.649
1795970.318
1795986.987
1796003.656
1796020.325
1796036.994
2
3
4
5
6
可以看到一帧的时间大致为 16ms。requestAnimation 不仅可以用在动画上, 更是被 React 团队用来 hack requestIdleCallback 的实现。可以阅读你不知道的 requestIdleCallback
- Web Worker