JavaScript获取DOM节点的方法详解：父、子、兄弟节点获取指南

JavaScript获取DOM节点的方法详解：父、子、兄弟节点获取指南

在实际开发过程中，经常需要获取页面中的特定HTML元素，以便动态更新其样式、内容或属性。

那么，如何获取需要更新的这些元素呢？使用JavaScript获取节点的方法有很多，以下是对常用方法的总结。

通过document节点获取元素

（1）document.getElementById(elementId)：该方法通过节点的ID来精确获取所需元素，是一种简单快捷的方式。需要注意的是，如果页面上存在多个具有相同ID的节点，该方法仅返回第一个匹配的节点。

如今，诸如Prototype、Mootools等JavaScript库提供了更简便的获取方式：$(id)，其参数依然是节点的ID。这种方法可以视为document.getElementById()的另一种写法，但$()的功能更为强大，具体用法可参考各自库的API文档。

（2）document.getElementsByName(elementName)：该方法通过节点的name属性来获取节点。从名称可以看出，它返回的不是单个节点元素，而是一个具有相同name属性的节点数组。随后，我们可以通过检查节点的某个属性，循环判断是否为所需的节点。

例如：在HTML中，checkbox和radio元素通常通过相同的name属性值来标识属于同一组的元素。如果我们需要获取被选中的元素，首先获取该组的所有元素，然后循环判断节点的checked属性值是否为true即可。

（3）document.getElementsByTagName(tagName)：该方法通过节点的标签名来获取节点，同样返回一个数组。例如：document.getElementsByTagName('A')将返回页面上所有的超链接节点。在获取节点之前，通常已知节点的类型，因此使用该方法较为简单。但其缺点也显而易见，即返回的数组可能非常庞大，从而消耗大量时间。那么，这个方法是否就毫无用处了呢？并非如此，与上述两个方法不同，它并非document节点的专有方法，还可以应用于其他节点，下文将对此进行介绍。

通过父节点获取子节点

（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')返回已知子节点中的所有超链接。

通过临近节点获取兄弟节点

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

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

通过子节点获取父节点

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

上述提到的方法仅为基础方法。如果使用了Prototype等JavaScript库，可能还会获得其他不同的方法，例如通过节点的class获取等。不过，若能灵活运用上述各种方法，相信应能应付大部分程序开发需求。