JavaScript 获取 HTML DOM 父、子及相邻节点方法总结

JavaScript 获取 HTML DOM 父、子及相邻节点方法总结

在 Web 应用程序尤其是 Web 2.0 开发场景中，经常需要定位页面中的特定元素，进而更新其样式或内容。解决这一问题的首要步骤是掌握如何准确获取目标元素。值得庆幸的是，JavaScript 提供了多种获取节点的方式，本文对此进行简要总结（以下方法已在 IE7 和 Firefox 2.0.0.11 环境中测试通过）： 1. 通过顶层 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 节点的专属方法，还可应用于其他节点，下文将作进一步说明。 2. 通过父节点获取： （1）parentObj.firstChild：若已知节点（parentObj）为第一个子节点，可使用此属性。该属性支持递归调用，即支持 parentObj.firstChild.firstChild.firstChild... 的形式，从而获取更深层次的节点。 （2）parentObj.lastChild：显然，此属性用于获取已知节点（parentObj）的最后一个子节点。与 firstChild 一样，它同样支持递归使用。 在实际应用中，若将二者结合使用，如 parentObj.firstChild.lastChild.lastChild...，将能实现更灵活的操作效果。 （3）parentObj.childNodes：获取已知节点的所有子节点数组，随后可通过循环或索引查找所需节点。 注意：经测试发现，在 IE7 中获取的是直接子节点的数组，而在 Firefox 2.0.0.11 中获取的是所有子节点，包括子节点的子节点。 （4）parentObj.children：获取已知节点的直接子节点数组。 注意：经测试，在 IE7 中，其效果与 childNodes 相同，而 Firefox 2.0.0.11 不支持此属性。这也是为何采用与其他方法不同样式的原因。因此，不建议使用该方法。 （5）parentObj.getElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如： parentObj.getElementsByTagName('A') 返回已知子节点中的所有超链接。 3. 通过相邻节点获取： （1）neighbourNode.previousSibling：获取已知节点（neighbourNode）的前一个节点。该属性与前述的 firstChild、lastChild 类似，均支持递归使用。 （2）neighbourNode.nextSibling：获取已知节点的下一个节点，同样支持递归操作。 4. 通过子节点获取： （1）childNode.parentNode：获取已知节点的父节点。 上述方法仅为基本操作。若使用 Prototype 等 JavaScript 库，可能还会接触到其他获取节点的方式，例如通过 class 属性获取等。然而，若能灵活运用上述各种方法，相信足以应对大部分程序开发需求。