第一章 1.6 HTML5 的新功能(二)

时间 2019-11-11

原文原文链接

1.6.4 使用 Selectors API 简化选取操做javascript

除了语义化元素外，HTML5 还引入了一种用于查找页面 DOM 元素的快捷方式。 1-3 列出表了在 HTML5 出现以前，用来在页面中查找特定元素的函数。css

函数	描述	示例
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 中的元素。html

函数	描述	示例	结果
querySelector()	根据指定的选择规则，返回在页面中找到的第一个匹配元素	querySelector(“input.error”);	返回第一个CSS类名为
querySelectorAll	根据指定规则返回页面中全部相匹配的元素	querySelectorAll(“#results td”);	返回id值为results的元素下全部的单元格

能够为 Selectors API 函数同时指定多个选择规则，例如：
// 选择文档中类名为 highClass 或 lowClass 的第一个元素java

var x = document.querySelector(“.highClass”, “.lowClass”);对于 querySelector() 来说，选择的是满足规则中任意条件的第一个元素。对于querySelector- All()来讲，页面中的元素只要知足规则中的任何一个条件，都会被返回。多条规则是用逗号分隔的。之前在页面上跟踪用户操做很困难，但新的 Selectors API 提供了更为便捷的方法。好比，页面上有一个表格，咱们想获取鼠标当前在哪一个单元格上。从代码清单 1-3 中能够看到使用 SelectorsAPI 实现有多简单。这份源代码也能够从 code/intro 路径下找到。编程

代码清单 1-3 使用 Selector API json

<!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更快。为了实现快速样式表，浏览器对选择器匹配进行了高ide

不难理解为何 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 的捐赠促进了各家浏览器对新脚本引擎的研发，而这些引擎的名字就如同他们声称的性能同样有意思。