JavaScript获取DOM元素的11种方法详解

在Web应用，尤其是Web2.0程序的开发过程中，经常需要定位并更新页面中特定元素的样式或内容。解决这一问题的首要步骤是准确获取目标元素。幸运的是，JavaScript提供了多种获取节点的方式。以下总结的方法已在IE7和Firefox2.0.0.11环境中测试通过。

通过顶层document节点获取元素

1. 通过顶层document节点获取：

（1）document.getElementById(elementId)：该方法依据节点ID精准定位元素，是较为简洁高效的方式。若页面中存在多个相同ID的节点，该方法仅返回第一个匹配项。

目前，Prototype、Mootools等JavaScript库提供了更便捷的封装：$(id)，其参数仍为节点ID。此方法可视为document.getElementById()的变体，但功能更为丰富，具体用法可参考相关API文档。

（2）document.getElementsByName(elementName)：该方法依据节点名称获取节点，返回的是具有相同name属性的节点数组。随后，可通过遍历该数组，检查特定属性来筛选目标节点。

例如，在HTML中，checkbox和radio通常通过相同的name属性值来标识同一组元素。若需获取被选中的元素，可先获取该组所有元素，再循环检查节点的checked属性是否为true。

（3）document.getElementsByTagName(tagName)：该方法依据节点标签名获取节点，同样返回数组。例如，document.getElementsByTagName('A')将返回页面中所有超链接节点。由于通常已知节点类型，使用该方法较为简便。但其缺点在于返回的数组可能非常庞大，导致性能损耗。尽管如此，该方法并非无用，与前述两种方法不同，它并非document节点的专属方法，还可应用于其他节点，下文将详述。

通过父节点获取元素

2、通过父节点获取：

（1）parentObj.firstChild：若已知节点（parentObj）为第一个子节点，可使用此方法。该属性支持递归调用，即parentObj.firstChild.firstChild.firstChild...，从而获取更深层次的节点。

（2）parentObj.lastChild：显然，此属性用于获取已知节点（parentObj）的最后一个子节点。与firstChild类似，它也支持递归使用。

在实际应用中，若将二者结合，例如parentObj.firstChild.lastChild.lastChild...，可产生更为灵活的效果。

（3）parentObj.childNodes：获取已知节点的所有子节点数组，随后可通过循环或索引查找目标节点。

注意：经测试，在IE7上，该属性返回直接子节点的数组；而在Firefox2.0.0.11上，它返回所有子节点，包括子节点的子节点。

（4）parentObj.children：获取已知节点的直接子节点数组。

注意：经测试，在IE7上，其效果与childNodes相同；而Firefox2.0.0.11不支持此属性。鉴于此差异，建议谨慎使用该方法。

（5）parentObj.getElementsByTagName(tagName)：用法不再赘述，它返回已知节点下所有类型为指定值的子节点数组。例如，parentObj.getElementsByTagName('A')返回已知子节点中的所有超链接。

通过临近节点获取元素

3、通过临近节点获取：

（1）neighbourNode.previousSibling：获取已知节点（neighbourNode）的前一个节点。该属性与firstChild、lastChild类似，支持递归使用。

（2）neighbourNode.nextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。

通过子节点获取元素

4、通过子节点获取：

（1）childNode.parentNode：获取已知节点的父节点。

上述方法仅为基本手段。若使用Prototype等JavaScript库，还可能通过节点class等方式获取元素。不过，若能灵活运用上述各种方法，相信足以应对大部分编程需求。