Page 24 - JavaScript修炼之道

任务4 获得DOM元素的引用 11

通过ID属性获得对应的元素

document.getElementById('elementId') // 原始的W3C DOM
$('elementId') // Prototype， MooTools
$('#elementId') // jQuery
Y.one('#elementId') // YUI3
dojo.byId('elementId') // Dojo
Ext.getDom('elementId') // Ext JS3

通过XPath/CSS选择来获得元素

不同的库所支持的语法可能会有所差异，W3C选择器API只在最新的浏览器中可用（不过
其速度相当快），这些浏览器包括：Firefox 3.1+、Safari 3.1+、IE8+（标准模式）、Chrome以及
Opera 10+。

还需要注意的是，这些库都提供了一些途径来指定上下文，也就是作为搜索起点的根节点（默
认是整个文档）。尽可能缩小上下文的范围，以争取更快的执行速度和更小的内存占用。

document.querySelectorAll('selectors') // Native（如上）
$$('selectors') // Prototype， MooTools
someRootElement.select('selectors') // Prototype
$('selectors') // jQuery
Y.all('selectors') // YUI 3
dojo.query('selectors') // Dojo
Ext.query('selectors') // Ext JS 3
元素间移动（遍历DOM）

下面的例子基于Prototype，如果需要这个例子的上下文和额外的信息，请阅读左页。

// 从具有指定id属性的元素开始，到达最近的class属性为category的<h2>元素
// 然后遍历这个元素的兄弟元素直到遇到一个class属性为summary的元素
$('someDeeplyNestedElement').up('h2.category').next('.summary');

// 找到带有名为sifr的CSS class的元素
// 设置这些元素的直接容器的CSS文本缩进属性
$$('a.sifr').invoke('up').invoke('setStyle', 'text-indent: -9999px');