该篇作为 HTML5 的一个引子，大体将 HTML5 中常用 api 作个简单分类。

HTML5 DOM

  1. getElementsByClassName

  2. 遍历相关，如下左侧属性

只涉及元素节点的操作(不涉及其它节点)，建议使用左侧的属性替代右侧的属性：

属性名 被替代的属性
children childNodes
childElementCount childNodes.length
previousElementSibling previousSibling
nextElementSibling nextSibling
firstElementChild firstChild
lastElementChild lastChild
  1. ele.scrollIntoView()

调用 ele.scrollIntoView(), ele 元素顶端会移动到可视区域的顶端; 若传入参数 alignToTop: false, 则 ele 移到屏幕底部;

HTML5 事件

  1. contextmenu

contextmenu 使用 demo

  1. <ul id="myMenu" style="position: absolute;visibility: hidden;background-color: silver">
  2.   <li>111</li>
  3.   <li>222</li>
  4.   <li>333</li>
  5. </ul>
  6. <script>
  7.   var menu = document.getElementById('myMenu')
  8.   document.addEventListener('contextmenu', (event) => {
  9.     event.preventDefault()
  10.     menu.style.left = event.clientX + 'px'
  11.     menu.style.top = event.clientY + 'px'
  12.     menu.style.visibility = 'visible'
  13.   }, false)
  14.   document.addEventListener('click', (event) => {
  15.     menu.style.visibility = 'hidden'
  16.   }, false)
  17. </script>
  1. DOMContentLoaded

优于 window.load 执行

  1. readystatechange

可用来判断动态载入的 script、link 标签是否加载完成。demo 如下:

  1. const script = document.createElement('script')
  2. script.addEventListener('readystatechange', function eventListener(event) {
  3.   if (event.readyState === 'loaded' || event.readyState === 'complete') { // hack 的手段，浏览器自身的问题
  4.     script.removeEventListener('readystatechange', eventListener)
  5.   }
  6. })
  8. script.src = 'example.js'
  9. document.body.appendChild(script)
  1. hashchange

HTML5 表单

  1. input/textarea 里新增 autoFocus() 字段

  2. 表单校验 api

使用 checkValidate() 校验 required、pattern="\d+" 属性

HTML5 脚本

  1. 跨文档消息传输(XDM), 核心是 postMessage

  2. 拖放 api

拖放 api 使用示例

  1. <head>
  2.     <style>
  3.         #draggable {
  4.             width: 200px;
  5.             height: 20px;
  6.             text-align: center;
  7.             background: white;
  8.         }
  10.         .dropzone {
  11.             width: 200px;
  12.             height: 20px;
  13.             background: blueviolet;
  14.             margin-bottom: 10px;
  15.             padding: 10px;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <div class="dropzone">
  22.         <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
  23.             This div is draggable
  24.         </div>
  25.     </div>
  26.     <div class="dropzone"></div>
  27.     <div class="dropzone"></div>
  28.     <div class="dropzone"></div>
  29.     <script>
  30.         window.onload = function () {
  31.             var dragged
  33.             document.addEventListener("dragstart", function (event) {
  34.                 dragged = event.target
  35.             }, false)
  37.             document.addEventListener("dragover", function (event) {
  38.                 // prevent default to allow drop
  39.                 event.preventDefault()
  40.             }, false)
  42.             document.addEventListener("drop", function (event) {
  43.                 // prevent default action (open as link for some elements)
  44.                 event.preventDefault()
  45.                 if (event.target.className == "dropzone") {
  46.                     dragged.parentNode.removeChild(dragged)
  47.                     event.target.appendChild(dragged)
  48.                 }
  49.             }, false)
  50.         }
  51.     </script>
  52. </body>

  1. 媒体元素 <video>、<audio>

  2. 浏览器状态管理(history)

HTML5 存储

  1. sessionStorage: 大小上限为 2.5Mb(不同浏览器会有差异), 页面关闭时便清空;

  2. localStorage: 大小上限为 2.5Mb(不同浏览器会有差异), 页面关闭时不会清空;

它们的 api 也是一致的, 有如下几个:

  • setItem(key, value)

  • getItem(key)

  • removeItem(key)

  • clear()

在 HTML5 范围之外与存储相关的技术还有 cookie(存放在客户端，可以由客户端也可以由服务端生成, 大小上限为 4 kb)、IndexedDB(大小上限为 5 Mb)、cacheStorage(ServiceWorker)。

HTML5 JavaScript Api

  1. requestAnimationFrame(callback): 表示在重绘前执行指定的回调函数，下面通过一个简单的 demo 来认识它。
  1. let frame
  2. function callback(timeStamp) {
  3.   console.log(timeStamp) // 开始执行回调的时间戳
  4.   // 如果想要产生循环动画的效果, 需在回调函数中再次调用 requestAnimationFrame()
  5.   requestAnimationFrame(callback)
  6. }
  7. frame = requestAnimationFrame(callback) // 在下次重绘之前调用回调
  8. // 可以在销毁期的生命周期函数中执行以下函数
  9. componentWillUnMount() {
  10.   cancelAnimationFrame(frame)
  11. }

执行上述代码, 控制台(chrome)打印如下数据:

  1. 1795953.649
  2. 1795970.318
  3. 1795986.987
  4. 1796003.656
  5. 1796020.325
  6. 1796036.994

可以看到一帧的时间大致为 16ms。requestAnimation 不仅可以用在动画上, 更是被 React 团队用来 hack requestIdleCallback 的实现。可以阅读你不知道的 requestIdleCallback

  1. Web Worker