《HTML5实战》——1.3 HTML5的DOM API

本节书摘来自异步社区《HTML5实战》一书中的第1章，第1.3节，作者： 【美】Rob Crowther , Joe Lennon , Ash Blue , Grey Wanish 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 HTML5的DOM API

在HTML5中，DOM API的身影无处不在。实际上，尽管已经存在了很长时间，但它们却从没有在HTML规范中得到过定义。这其中就包括一些通过ID属性来获取DOM元素以及操作表单元素值的特性。现在，所有这些特性都包括在了HTML5规范中，规范还定义了一些用于开发高级应用的新DOM API，其中很多都跟HTML元素毫无关系。

本节将要概述的HTML5新增DOM API

• 2D Canvas。
• 音频与视频。
• 拖放。
• 跨文档通信。
• 服务器发送事件。
• WebSockets。
• 文档编辑。
• Web Storage。
• 离线Web应用。
  本书将对以上所有主题加以详述，其中在创建有些全功能实例时，经常会用到多个API。本章将大致介绍一下这些API。下面，先来看看canvas元素及其相关API。

1.3.1 Canvas
HTML5提供了很多用于在Web页面上呈观信息的元素。可以用许多不同的方式来调整它们的样式，也可以用JavaScript来制作动画并添加动态效果。如果你喜欢使用复杂的JavaScript代码（并且希望用户能用一些高性能的浏览器），那么用HTML和JavaScript可以做出非常惊艳的效果。

但问题在于，设计师和开发者可能需要实现的很多东西都是HTML无法给予原生支持的。比如，怎样插入圆形、正方形或其他形状？如何显示一副图像并能基于用户选择而立刻动态改变它？当然，可以使用一些静态图像或利用服务器端技术来解决，但这些都不是最理想的方案。过去唯一可行的方法就是用第三方浏览器插件来解决，比如Adobe Flash。

HTML5引入了canvas元素以及一些相关的图形绘制API，从而使用户无需安装插件，即能观看到开发者所创建的令人惊叹的效果。canvas的名字也就很好地诠释了自身的特点：它就相当于Web页面的一张画布。图1-7展示的是完全用 HTML5和 JavaScript 创建的一个游戏“Canvas Break”，利用canvas元素来输出游戏的可视化部分。不错吧？第6章将介绍如何使用Canvas API来创建这个游戏。

Canvas API定义了一个2D内容，为在画布上进行绘制提供了一些方法。这些方法能够创建形状、定义路径、使用颜色与渐变、使用文本，等等。另外，开发者还可以通过数据URL或Blob对象，将当前画布内容导出为PNG或JPG格式的图像。

1.3.2 音频与视频
近年来，多媒体内容（视频与音频）占据着互联网大部分的带宽。现在的Web视频多数都是Flash video（FLV）格式，这种格式是Adobe Flash的一种包含多种视频解码器的容器。如果用户安装了Flash浏览器插件，那么就能观看这种视频文件了。一些开发者越来越质疑Flash这一视频平台的安全性和性能，积极寻找替代方案。另外，移动设备对Flash的支持不够，假如想在iPad上观看多媒体内容，那就没辙了。

现在，终于有了替代方案，那就是使用HTML5新引入的video和audio这两个元素。浏览器能够原生地播放多媒体内容，不再需要第三方插件的支持，如图1-8所示。

video和audiO这两个元素都支持track元素，从而可以添加如字幕这样的附加文本。通过使用source元素，还可以提供多种文件格式，从而能够以多种系统和浏览器访问同一内容。

HTML5还提供了一种可以控制音频及视频回放的API。利用该API所包含的各种方法，播放、暂停、快进、快退、调整音量等功能都可以实现。第8章将详细介绍如何利用该API的各种功能来创建一种带有视频标注功能的视频播放器。

1.3.3 拖放功能
很长一段时间内，实现拖放功能曾经是令很多Web应用开发者深感头疼的事情。自从有了图形用户界面之后，这种功能在台式机软件上已经变得司空见惯了，所以用户逐渐也希望能在Web应用上使用拖放操作，但有时他们会吃惊地发现，自己最喜欢的Web应用却做不到这一点。

20世纪90年代末，开发者开始尝试在浏览器上实现拖放功能，先是由Netscape 4.0提出了一个简单的实现，而后微软又在IE 5.0上给出了一个完整而复杂的实现方式。那时，这一功能还只是一个非标准的、IE 独有的浏览器扩展，但后来其他浏览器厂商逐渐采用了这一API，最终使其被HTML5所采纳。

好消息是，HTML5的拖放功能可以被现今所有浏览器支持，这其中当然也包括IE 5.0 及5.0之后的版本。坏消息是，坦白讲，早期微软所用的实现方案实在是太糟糕了。HTML5规范的编辑Ian Hickson有一次发推文称“拖放功能API实在太糟糕了，但这至少意味着IE6和Safari与Firefox一样，实现了这一效果。”

在HTML5中，使用某一元素的draggable属性，即可使该元素（如图像，默认）具备可拖放功能。当用户拖动元素进入或离开其他元素时，甚至当用户放下元素时，你可以利用一系列的事件来侦听这些改变。借助拖放API，你还可以设定与拖动操作的相关数据，当放下时再进行读取。

HTML5还引入一种新的拖放功能，使我们可以把电脑中的文件拖动到Web应用中。如图1-9所示，Gmail就是这样做的。

第3章讲述如何使用拖放功能来导入导出文件。

1.3.4 跨文档通信、服务器端发送的事件以及WebSockets
Web应用工作在“请求-响应”模式下，客户端向服务器端发送一个请求，服务器端转而发送给客户端一个响应。如果客户端此后还希望从服务器端获得更多信息，那么就需要发起新的请求。如果客户端不经常发送请求来查看消息更新情况，那么服务器端就很难将消息更新反馈给客户端。本节将介绍HTML5中引入的一些新的通信特性，它们能让服务器端主动和客户端进行通信。在此之前，先让我们介绍一下如何在文档间利用通信来传递消息变更。

利用跨文档通信与通道通信实现客户端通信
在使用有多个浏览器窗口的Web应用时，我们经常需要在页面间传递消息。过去，这种功能一般是采用直接操控DOM元素来完成的。例如，老式的航班订票系统可能会用一个新Web窗口打开一个日历小部件，当用户选中一个日期时，系统就会直接在父窗口的日期表单字段上修改日期值。

直接操控DOM元素的问题在于，两个文档直接连接在一起，为了共享信息，每一个文档都知道对方的结构。相比之下，HTML5所引入的跨文档通信与通道通信就先进多了，如图1-10所示。

跨文档通信可以让各文档通过消息来进行沟通——一个文档发布消息，而另一个文档利用注册的事件处理器来侦听这些消息。

直接操控DOM还容易引起安全性问题。当应用使用了远端脚本文件时，比如在应用内实现类似谷歌分析（Google Analytics）或Facebook的“喜欢”按钮这样的功能时，这些脚本文件容易降低Web应用的安全性。这些脚本都能够完全访问你的页面上所有的DOM元素——当以这种方式加载它们时，你无法限制它们的访问权限。而跨文档通信就比较安全，由于能够跨域运作，所以无需暴露每一个Web应用的DOM即能实现消息在各应用间的传播。

利用服务器发送事件实现从服务器端到客户端的单向通信
对于两个客户端之间的通信来说，跨文档通信是非常好的一种方式。但是，如果想让Web服务器发送的消息能被浏览器接收，则需要用到服务器端发送事件了。利用EventSource接口，你的Web应用能够订阅一个服务器端事件流，它只接收服务器发送的更新消息。与过去使用的难以实现的AJAX长轮询方式相比，这无疑是一种非常大的改进。它非常适合聊天应用，你可以利用AJAX发布新的聊天消息，然后通过事件流接收来自其他用户的聊天消息。稍后将介绍如何创建这种聊天应用，这种应用的截图如图1-11所示。

https://yqfile.alicdn.com/e6414ae9620b35a1050d45e9cab1fca96daa14c2.png" >

使用WebSockets实现服务器端与客户端的双向通信
服务器发送事件的最明显的缺点在于只能单向通信，消息只能从服务器端发送到客户端，反之则不行。如果需要双向通信，HTML5还提供了 WebSockets。这是客户端与服务器端之间的一种最基本的网络技术，没有与HTTP相关的开销。WebSockets很适合快速传送小规模数据。对在线游戏和时间敏感性极高的财务系统来说，这种特性是非常关键的。

第 4 章将通过一个简单的聊天应用和多用户计划板应用来介绍以上三个新通信技术的应用，其间将使用服务器发送事件，并通过Node.js来实现WebSockets，还将通过跨文档通信技术来实现这两个应用间的通信。

1.3.5 文档编辑
如前所述，我们曾经谈过HTML5中新增的表单功能。的确，Web表单能够很好地获取用户输入的纯文本，但并不允许用户编辑HTML内容。当然，你可以用textarea元素来加载HTML源代码，从而让用户编辑HTML内容，但若通过一些富文本编辑控件来编辑内容，用户体验岂不更好？

HTML5提供了两种新属性，可以实现在HTML页面内进行富文本编辑。一个是contenteditable属性，它可以在页面的任何一个HTML元素中设置，从而使该元素具备可编辑性。另一个是designMode，在HTML文档自身设置，使整个文档都变成可编辑状态。

现在所有浏览器都支持这些属性，而最先引入它们的浏览器是IE5.5。

当元素或文档可编辑时，可以用HTML5的Editing DOM API的方法document. execCommand来操纵其内容。该方法能应用于当前选择或区块，可以实现粗体、斜体、插入链接等特性。图1-12展示了利用这种功能创建的编辑器。第3章还将进一步讲解如何使用这些新特性来创建富文本编辑器。

1.3.6 Web存储
一直以来，Web应用都在用cookie将数据存储在客户端，它们能在一次会话或多个会话中维持。这就是Web认证系统的底层技术：在客户端存储的cookie含有一些标识符，Web应用借此可以识别登录的用户。Cookie有很多问题，导致它们只能存储极少量的数据。

第一个问题在于，大多数浏览器都将cookie限制在4096字节内，每个域最多只能存储20个cookie。限额一旦达到，浏览器就会将旧cookie删除，以便为新cookie腾出空间，这就意味着浏览器无法保存所有cookie。另一个问题在于，当Web应用使用cookie时，每一个针对该会话的HTTP请求都会带有cookie，从而加重了每一事务的负担。如果只用一两个cookie，那么根本不碍事，但如果有很多呢？每个HTTP请求都将带着所有cookie发送出去，这就减慢了页面加载速度与应用作出的AJAX请求。

Web Storage DOM API为Web应用提供了一个能够替代cookie的JavaScript解决方案。这一API定义了以下两个接口。

sessionStorage——客户端数据存储，只能维持在当前会话范围内。
localStorage——客户端数据存储，能维持在多个会话范围内。
该API公开的方法能把简单的键/值对数据存储在客户端中。使用这些接口的已存储数据项只能被同一域内的页面所访问。第5章介绍了一个将用户设置和偏好参数保存在本地存储的Web应用，如图1-13所示。

https://yqfile.alicdn.com/d9c2003abeceeba073d33012f5efd5eca683ee1d.png" >

虽然该API能够存储兆级数据（多数浏览器最多能支持5M），但复杂的数据结构却并不适用于此，而通常是存储到数据库中。本章稍后将介绍到IndexDB，这是一种完全索引化的数据库API，通过它可以将数据存储在客户端本地。

1.3.7 离线Web应用
时至今日，似乎人们永远都处于在线状态——网络一直保持着连接状态，签订了蜂窝数据网络的数据合约，移动设备也可以上网了，现在甚至乘飞机旅行时都可以上网了。即便如此，有时仍会碰上离线的情况：网络连接中断，国外的数据漫游费太高，或者使用的设备没有无线数据连接功能，等等。为离线使用而保存HTML文档的方法很早就有了。但这些技术适用于阅读静态内容（如新闻），碰到Web应用就没辙了。HTML5不再仅限于保存页面这一功能，它可以定义一种缓存清单文件，规定了应用文件的离线缓存方式。

缓存清单文件也可以定义不用于离线使用的文件。在这种情况下，将提供一种回退方案（fallback），当用户处于离线状态时，浏览器就会加载这种回退。这就可以为离线与在线这两种状态分别提供不同的文件。

关于这方面有一个典型的用例，即应用将数据保存到服务器端的数据库中。当处于在线状态时，应用会执行AJAX请求来取回并更新数据库上的数据。在后台，应用会将数据存储在本地的IndexDB数据库中，下一节将予以详述。当处于离线状态时，应用就会加载一个专为离线而设计的JavaScript文件。它并不会向服务器端发送AJAX请求，它会从本地的IndexedDB中取回并修改数据。当下次用户再次联网时，应用就会把本地数据库里的数据提交给服务器端数据库。

第5章将介绍如何开发离线Web应用，如图1-14所示。