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

作者:竹影

时间:2026-10-29

浏览:619

本文总结了JavaScript中获取DOM元素的11种常用方法,涵盖通过顶层document、父节点、临近节点及子节点等维度的操作。重点解析了getElementById、getElementsByName、getElementsByTagName以及firstChild、parentNode等属性的具体用法与返回值差异,并对比了IE7与Firefox2.0.0.11在childNodes和children属性上的兼容性问题,为Web开发中的节点定位提供实用参考。

文章目录

在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等方式获取元素。不过,若能灵活运用上述各种方法,相信足以应对大部分编程需求。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章