1.6 HTML5的新功能 21 1
2 3 4 5 6 7 8 8 9
图1-2是代码清单1-1中的页面应用了CSS（包括部分CSS3）之后的显示效果。其实并不能把
10 这个页面当成所谓的典型HTML5页面。因为计划赶不上变化，这个示例使用了很多新标签只是为了演示而已。
11 22 第1章 HTML5概述
图1-2 使用了所有新的语义化标记元素的HTML5页面
最后需要说明的是，看起来好像浏览器是因为识别了新的元素，所以显示出了对应的内容。其实不然，事实上这些元素很可能是先被重命名为了foo或者bar，然后再应用样式，最后才显示出来的（当然，对于搜索引擎优化来说没有任何好处）。IE是个特例，因为IE需要将这些元素都作为DOM的一部分，所以要想在IE中看到这些元素，必须用编程的方式把它们插入DOM中，然后再以块元素（block element）的形式显示出来。能实现此功能的脚本是html5shiv，很容易获得该脚本（http://code.google.com/p/html5shiv/）。
1.6 HTML5的新功能 23 1.6.4 使用Selectors API简化选取操作
除了语义化元素外，HTML5还引入了一种用于查找页面DOM元素的快捷方式。表1-3列出了
1
2 在HTML5出现之前，用来在页面中查找特定元素的函数。
表1-3 以前用来查找元素的JavaScript方法
函 数
getElementById()
3 示 例
描 述
根据指定的id特性值查找并返回元素
getElementById(\
4 getElementsByName()
返回所有name特性为指定值的元素
5 getElementsByTagName() 返回所有标签名称与指定值相匹配的元素
getElementsByTagName(\
有了新的Selectors API之后，可以用更精确的方式来指定希望获取的元素，而不必再用标准DOM的方式循环遍历。Selectors API与现在CSS中使用的选择规则一样，通过它我们可以查找页面中的一个或多个元素。例如，CSS已经可以基于嵌套（nesting）、兄弟节点（sibling）和子模式（child pattern）进行元素选择。CSS的最新版除添加了更多对伪类(pseudo-classe)的支持（例如判
6 7 8 8 断一个对象是否被启用、禁用或者被选择等），还支持对属性和层次的随意组合叠加。使用表1-4中的函数就能按照CSS规则来选取DOM中的元素。
表1-4 新QuerySelector方法
函 数
querySelector()
9 描 述
根据指定的选择规则，
返回在页面中找到的第一个匹配元素
根据指定规则返回页面中所有相匹配的元素
示 例
querySelector (\
结 果
返回第一个CSS类名为“error”的文本输入框
10 querySelectorAll()
querySelectorAll (\返回id值为results的元素下所有的单元格
11 24 第1章 HTML5概述 可以为Selectors API函数同时指定多个选择规则，例如：
// 选择文档中类名为highClass或lowClass的第一个元素
Var x = document.querySelector(\
对于querySelector()来说，选择的是满足规则中任意条件的第一个元素。对于query-
Selector-All()来说，页面中的元素只要满足规则中的任何一个条件，都会被返回。多条规则
是用逗号分隔的。
以前在页面上跟踪用户操作很困难，但新的Selectors API提供了更为便捷的方法。比如，页面上有一个表格，我们想获取鼠标当前在哪个单元格上。从代码清单1-3中可以看到使用Selectors API实现有多简单。这份源代码也可以从code/intro路径下找到。
代码清单1-3 使用Selector API
1.6 HTML5的新功能 25 1
2 3 4 5 6 7 8
8 找出页面中的单元格
9
10 从以上示例可以看到，仅用一行代码即可找到用户鼠标下面的元素：
11