JavaScript中getElementsByName与getElementsByTagName用法详解

JavaScript DOM元素获取方法概述

我们首先来看一个常见场景：

假设通过 document.all.aaa 获取元素，虽然存在名为 aaa 的对象，但由于不确定其返回的是单个元素还是元素集合，无法直接确定长度，因此直接操作存在风险。我们需要先判断其长度，代码如下：

if(oEle.length){}else{};

根据元素数量的不同，花括号内的处理逻辑也有所区别：

 
if(oEle.length){
for(var i = 0 ;i<oEle.length;i++){
oEle[i].value........
} 
} 
else{
oEle.value........
}; 

getElementsByName的简化处理优势

然而，这种写法显得过于繁琐。当花括号内的逻辑较多时，需要重复编写两套代码，增加了维护成本。

幸运的是，document.getElementsByName() 方法提供了更简洁的解决方案。它对单个元素和多个元素的处理方式保持一致，我们可以直接使用：

oEle = document.getElementsByName('aaa') 来获取元素集合。

当 oEle 仅包含一个元素时，通过 oEle[0] 访问；若包含多个元素，则通过下标 oEle[i] 循环获取。这种方式是否更加简洁高效？

值得注意的是，该方法对 Name 属性和 ID 属性均有效。

getElementsByTagName与相关方法对比

不过，getElementsByName 仅适用于 document 对象。若需应用于更广泛的对象范围，可考虑另一种方法：

getElementsByTagName。例如，已知一个 ID 为 aaa 的 <DIV> 元素，内部包含多个 <input> 标签：

若要获取该 DIV 内的所有 input 元素，可编写：aaa.getElementsByTagName('INPUT')。这样即可有效区分其他同名 DIV（如名为 bbb 的 DIV，其内部结构相同）。

与 getElementsByTagName 对应，还存在 document.body.all.tags() 方法。该方法适用的对象范围比 getElementsByTagName 小，但比 getElementsByName 大。

最后需提及 getElementById，它同样仅适用于 document 对象，且返回的是匹配元素的第一个实例。正如方法名所示，它是 getElement 而非 getElements，因此切勿混淆。