第一章 1.6 HTML5 的新功能(二)
1.6.4 使用 Selectors API 简化选取操作
除了语义化元素外，HTML5 还引入了一种用于查找页面 DOM 元素的快捷方式。 1-3 列出表了在 HTML5 出现之前，用来在页面中查找特定元素的函数。
| 函数 | 描述 | 示例 |
|---|---|---|
| getElementById() | 根据指定的id特性值查找并返回元素 | <div id=”foo”> getElementById(“foo”); |
| getElementsByName() | 返回所有name特性为指定值的元素 | <input type=”text” name=”foo”> getElementsByName(“foo”); |
| getElementsByTagName() | 返回所有标签名称与指定值相匹配的元素 | <input type=”text”> getElementsByTagName(“input”) |
有了新的 Selectors API 之后，可以用更精确的方式来指定希望获取的元素，而不必再用标准DOM 的方式循环遍历。Selectors API 与现在 CSS 中使用的选择规则一样，通过它我们可以查找页面中的一个或多个元素。例如，CSS 已经可以基于嵌套（nesting）、兄弟节点（sibling）和子模式（child pattern）进行元素选择。CSS 的最新版除添加了更多对伪类(pseudo-classe)的支持（例如判断一个对象是否被启用、禁用或者被选择等），还支持对属性和层次的随意组合叠加。使用表 1-4 中的函数就能按照 CSS 规则来选取 DOM 中的元素。
| 函数 | 描述 | 示例 | 结果 |
|---|---|---|---|
| querySelector() | 根据指定的选择规则，返回在页面中找到的第一个匹配元素 | querySelector(“input.error”); | 返回第一个CSS类名为 |
| querySelectorAll | 根据指定规则返回页面中所有相匹配的元素 | querySelectorAll(“#results td”); | 返回id值为results的元素下所有的单元格 |
可以为 Selectors API 函数同时指定多个选择规则，例如：
// 选择文档中类名为 highClass 或 lowClass 的第一个元素
var x = document.querySelector(“.highClass”, “.lowClass”);对 于 querySelector() 来 说 ， 选 择 的 是 满 足 规 则 中 任 意 条 件 的 第 一 个 元 素 。 对 于querySelector- All()来说，页面中的元素只要满足规则中的任何一个条件，都会被返回。多条规则是用逗号分隔的。以前在页面上跟踪用户操作很困难，但新的 Selectors API 提供了更为便捷的方法。比如，页面上有一个表格，我们想获取鼠标当前在哪个单元格上。从代码清单 1-3 中可以看到使用 SelectorsAPI 实现有多简单。这份源代码也可以从 code/intro 路径下找到。
代码清单 1-3 使用 Selector API
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Query Selector Demo</title> <style type="text/css"> td { border-style: solid; border-width: 1px; font-size: 300%; } td:hover { background-color: cyan; } #hoverResult { color: green; font-size: 200%; } </style> </head> <body> <section> <!-- create a table with a 3 by 3 cell display --> <table> <tr> <td>A1</td> <td>A2</td> <td>A3</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> </tr> <tr> <td>C1</td> <td>C2</td> <td>C3</td> </tr> </table> <div>Focus the button, hover over the table cells, and hit Enter to identify them using querySelector('td:hover').</div> <button type="button" id="findHover" autofocus>Find 'td:hover' target</button> <div id="hoverResult"></div> <script type="text/javascript"> document.getElementById("findHover").onclick = function() { // 找到鼠标当前悬停的单元格 var hovered = document.querySelector("td:hover"); if (hovered) document.getElementById("hoverResult").innerHTML = hovered.innerHTML; } </script> </section> </body> </html>
从以上示例可以看到，仅用一行代码即可找到用户鼠标下面的元素：
var hovered = document.querySelector(“td:hover”);
提示 Selectors API不仅仅只是方便，在遍历DOM的时候，Selectors API通常会比以前的子节点搜索API更快。为了实现快速样式表，浏览器对选择器匹配进行了高
不难理解为什么 W3C 中的 Selectors API 标准规范会从 CSS 规范中单独分离出来，从上面的代码也可以看出来，Selectors API 在样式应用以外同样大有作为。虽然本书不会深入讲解 SelectorsAPI 的全部细节，但是对于希望优化 DOM 操作方式的 Web 开发人员来说，建议使用新的 SelectorsAPI 以便快速查询应用架构。度优化。
1.6.5 JavaScript 日志和调试
JavaScript 日志和浏览器内调试从技术上讲虽然不属于 HTML5 的功能，但在过去的几年里，相关工具的发展出现了质的飞跃。第一个可以用来分析 Web 页面及其所运行脚本的强大工具是一款名为 Firebug 的 Firefox 插件。
现在，相同的功能在其他浏览器的内嵌开发工具中也可以找到：Safari 的 Web Inspector、Google 的 Chrome 开发者工具（Developer Tools） IE 的开发者工具、（Developer Tools） 以及 Opera，的 Dragonfly。图 1-3 是 Google 的 Chrome 开发者工具截图，显示了大量与当前 Web 页面相关的信息（使用快捷键 Ctrl+Shift+J 可以看到），包括调试控制台、资源视图、存储视图等。
很多调试工具支持设置断点来暂停代码执行、分析程序状态以及查看变量的当前值。
console.log API 已经成为 JavaScript 开发人员记录日志的事实标准。为了便于开发人员查看记录到控制台的信息，很多浏览器提供了分栏窗格的视图。console.log API 要比 alert()好用很多，因为它不会阻塞脚本的执行。
1.6.6window.JSON
JSON 是一种相对来说比较新并且正在日益流行的数据交换格式。作为 JavsScript 语法的一个子集，它将数据表示为对象字面量。由于其语法简单和在 JavaScript 编程中与生俱来的兼容性，JSON 变成了 HTML5 应用内部数据交换的事实标准。典型的 JSON API 包含两个函数，parse()和 stringify()（分别用于将字符串序列化成 DOM 对象和将 DOM 对象转换成字符串）。
如果在旧的浏览器中使用 JSON，需要 JavaScript 库（有些可以从http://json.org 找到）。在JavaScript中执行解析和序列化效率往往不高，所以为了提高执行速度，现在新的浏览器原生扩展了对 JSON 的支持，可以直接通过 JavaScript 来调用 JSON 了。这种本地化的 JSON 对象被纳入了ECMAScript 5 标准，成为了下一代 JavaScript 语言的一部分。它也是 ECMAScript 5 标准中首批被浏览器支持的功能之一。所有新的浏览器都支持 window.JSON，将来 JSON 必将大量应用于HTML5 应用中。
1.6.7DOM Level 3
事件处理是目前 Web 应用开发中最令人头疼的部分之一。除了 IE 以外，绝大多数浏览器都支持处理事件和元素的标准 API。早期 IE 实现的是与最终标准不同的事件模型， IE9 将会支持而DOM Level 2 和 DOM Level 3 的特性。如此，在所有支持 HTML5 的浏览器中，我们终于可以使
用相同的代码来实现 DOM 操作和事件处理了，包括非常重要的 addEventListener()和dispatchEvent()方法。
1.6.8 Monkeys、Squirrelfish 和其他 JavaScript 引擎
最新一轮的浏览器创新不仅仅是增加了新的标签和 API。最重要的变化之一是主流浏览器中JavaScript/ECMAScript 引擎飞快的升级。新的 API 提供了很多上一代浏览器无法实现的功能，因而脚本引擎整体执行效率的提升，不论对现有的，还是使用了最新 HTML5 特性的 Web 应用都有好处。还记得浏览器在显示复杂图像、处理数据或者编辑长篇文章时，明显变得迟钝的情景吗？再好好想一想。
最近几年，浏览器厂商争相比拼，看谁能开发出更快的 JavaScript 引擎。过去的 JavaScript
纯粹是被解释执行，而最新的引擎则直接将脚本编译成原生机器代码，相比 2005 年前后的浏览器，速度的提升已经不在一个数量级上了。
大约从 2006 年 Adobe 将其 JIT 编译引擎和代号为 Tamarin 的 ECMAScript 虚拟机捐赠给Mozilla 基金会开始，竞争的序幕就拉开了。尽管新版的 Mozilla 中 Tamarin 技术已经所剩无几，但 Tamarin 的捐赠促进了各家浏览器对新脚本引擎的研发，而这些引擎的名字就如同他们声称的性能一样有意思。
