JavaScript获取DOM节点的核心方法总结

在Web开发中，首要任务是准确定位需要更新的DOM元素。幸运的是，JavaScript提供了多种获取节点的方式。以下总结的方法已在IE7和Firefox 2.0.0.11环境中验证通过，可作为基础参考。

通过顶层document节点获取

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

（1）通过ID定位：该方法利用节点的ID属性精准获取目标元素，操作简便且高效。需注意，若页面中存在多个相同ID的节点，该方法仅返回第一个匹配的元素。

（2）通过Name定位：此方法依据节点的name属性返回一个包含所有同名节点的数组。由于返回的是集合，我们需要遍历该数组，通过检查特定属性（如checked）来筛选出目标节点。例如，在处理checkbox或radio组时，先获取同name属性的所有元素，再循环判断其checked属性是否为true，即可找到被选中的元素。

（3）通过标签名（Tag）定位：该方法返回一个包含所有指定标签元素的数组。虽然获取前通常已知标签类型，操作直观，但其缺点在于返回的数组可能极其庞大，导致性能开销较大。值得注意的是，该方法并非document节点的专属，也可应用于其他节点对象，下文将具体说明。

此外，现代JavaScript库（如Prototype、Mootools等）提供了更简洁的封装方法。例如，使用$()函数，参数仍为节点ID。这可视作document.getElementById()的简化写法，但$()功能更为强大，具体实现细节建议参考各库的官方API文档。

通过父节点获取子节点

2. 通过父节点获取子节点：

（1）firstChild属性：若已知父节点（parentObj），可通过此属性获取其第一个子节点。该属性支持链式调用，例如parentObj.firstChild.firstChild...，从而深入获取多层级的子节点。

（2）lastChild属性：用于获取父节点的最后一个子节点，同样支持递归链式调用，用法与firstChild类似。

（3）结合使用：将firstChild与lastChild结合，如parentObj.firstChild.lastChild...，可实现更复杂的节点定位，达到更灵活的效果。

（4）childNodes属性：获取父节点的所有子节点数组，随后可通过索引或循环查找目标节点。需注意浏览器差异：在IE7中，该属性仅返回直接子节点；而在Firefox 2.0.0.11中，它返回所有后代节点（包括子节点的子节点）。

（5）children属性：获取父节点的直接子节点数组。经测试，在IE7中其效果与childNodes一致，但Firefox 2.0.0.11不支持此属性。鉴于兼容性差异，建议谨慎使用或避免依赖此方法。

（6）getElementsByTagName(tagName)：在已知节点上调用此方法，返回所有指定类型的子节点数组。例如，parentObj.getElementsByTagName('A')将返回该父节点下所有的超链接元素。

通过临近节点获取

3. 通过临近节点获取：

（1）previousSibling：获取已知节点（neighbourNode）的前一个兄弟节点。与firstChild和lastChild一样，该属性支持递归链式调用。

（2）nextSibling：获取已知节点的下一个兄弟节点，同样支持递归操作。

4. 通过子节点获取父节点：

通过子节点获取父节点

（1）parentNode：直接获取已知节点（childNode）的父节点引用。

上述方法涵盖了DOM节点获取的基本场景。若项目中使用了Prototype等JavaScript库，还可能通过class等其他属性进行更高级的节点查找。只要灵活运用上述基础方法，通常足以应对大多数程序开发中的节点定位需求。

（3）

：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。

：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。

（4）

：获取已知节点的直接子节点数组。

：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。

（5）

：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：