Page 23 - JavaScript修炼之道
P. 23
10 第二部分 DOM、事件及定时器
任务 4 获得 DOM 元素的引用
获得页面上的DOM元素以及“遍历”DOM（从一个元素移至另一个元素）是编写Web脚本
的必需操作。虽然现在的浏览器已经可以提供不错的DOM元素获取方法（尽管人们用了足足十
年才达到这一步），不过在不使用库的情况下遍历DOM仍然非常烦琐。因此在实际工作中，我们
都需要使用这样或那样的库。
在这里需要注意以下几点。
首先，要注意document.getElementById，任何依赖于这个方法的代码都会成为IE怪异行
为的牺牲品。因为在IE中，这个方法也会通过name属性来寻找匹配的元素。如果你使用的是严
格的DOCTYPE（你应该这么做），这看起来意味着只需要“注意字段的命名”。由于你已经在潜意
识中排除了<head>和<meta>标签的name属性，所以当你不知不觉地定义了一个id属性和
<meta>标签特定属性相同的元素后，如果你用document.getElementById获取它，你将会惊
讶地发现你得到的是<meta>元素！所以，尽可能避免使用这些特殊值作为id属性的值。
在右页，我提到了绝大多数选择元素的技术，都需要先指定上下文节点或根节点，然后以
这个节点作为根元素，在其之上进行选择操作。默认的上下文是整个文档。翻阅一下API文档，
你会发现诸如$$()、query()以及$()等方法都有一个可选参数（一般是第二个），以便你来指定
上下文元素。要记住，搜索范围越窄，选择的速度也就越快。
最后，原始的DOM API并不适合实际的元素访问操作，因为它们适用于节点，而不是元素。
原始的DOM API会让你陷入到空白节点、注释节点、文本节点等节点的泥潭之中，因此，绝大多
数库提供了不错的面向元素的辅助方法。Prototype、jQuery和MooTools都提供了丰富的API，这
包括previous() （或prev()）、next()、siblings()、ancestors()等方法，还包括那些以get
为前缀的同类方法。YUI 3 API中提供的方法略微少些，而Dojo和Ext JS则暂时缺乏此类辅助方法。
绝大多数的库都支持基于ID和基于CSS3的选择。
