用JavaScript操作DOM的第一件事就是找到要修改的元素。前面已经提到,我 们开始只能得到根节点的一个引用,它保存在全局变量document中。DOM中的每 一个节点都是document的子节点(或孙节点、曾孙节点等等),但是要在大型的复 杂文档中,一步一步地缓慢搜寻是件体力活。幸运的是,我们可以走一些捷径。 最常用的方法就是给元素附加唯一的ID。在代码清单2-5的onload()函数中,我 们想要寻找两个元素:段落元素,我们为它设置样式;空的标签,我们为它添加 内容。如你所见,已经在HTML中为它们附加了唯一的ID属性,即:任何一个DOM 节点都可以分配一个ID,用来在程序中通过一个函数调用获得这个节点的引用, 无论它在文档中的什么位置:
var hello=document.getElementById('hello');
注意,这是Document对象的一个方法。在一个如上所述的简单情况中(以及在 很多复杂的情况中),可以通过document访问当前的Document对象。如果你使用 了IFrame(我们将会在后面讨论),那么可能需要跟踪多个Document对象,并确定 正在查询的是哪个Document对象。
在一些情况下,我们确实需要一步一步地搜索DOM树。因为DOM节点是以树形 结构来组织的,每一个DOM节点都只有不多于一个的父节点,但是可以有任意多 个子节点。可以通过parentNode和childNodes来访问它们。parentNode返回另外 一个DOM节点,而childNodes返回一个JavaScript节点数组,可以对其遍历,即 :
var children=empty.childNodes;
for (var i=0;i< SPAN>
...
}
即便在文档中的某个节点上没有附加唯一ID,我们仍有第三种方法可以方便 地定位节点。那就是,使用getElementsByTagName()方法,基于HTML标签的类型 搜索DOM节点。例如,document.getElementsByTagName("UL")会返回 一个包含文档中所有标签的数组。
这些方法对于操作那些我们几乎无法控制的文档[2]来说是很有用的。作为通 常的规则,使用getElementById()要比使用getElementsByTagName()更加安全, 因为前者对于文档结构和顺序的假设更少一些,这样文档结构可以独立于代码而 变化。