如何从对象HTML集合中获取控件ID？

Question

我想获取控件ID，以便我可以将事件附加到此id，代码为：

var t=document.getElementsByName('test');
alert(t);

这个't'在这里返回Object HTMLCollection但是当我在jsfiddle上运行这个代码时，我得到了Object NodeList，并且使用t[0].id我得到了所需的id。 我有一些要求，所以我不想使用document.getElementById();

任何人都可以告诉我为什么会这样，我怎样才能通过Object HTMLCollection获得控件的id？

Answer 1

所以看起来你有两个问题：

  

1）任何人都可以告诉我为什么会这样吗

和

  

2）如何通过Object HTMLCollection获取控件的id？

首先，我认为您需要了解HTMLCollection是什么。请阅读this stackoverflow question的答案并仔细注意所写的​​内容，特别是

  

getElementsByTagName是DOM接口的方法。它接受一个标签   将name命名为input并返回NodeList（某些浏览器选择返回   相反，HTMLCollection，这是好的，，因为它是一个超集   节点列表）

所以两者共享大多数属性，尤其是像id这样的基本属性。我建议您在MDN上阅读HTMLCollection和NodeList。

这也包含你的问题的答案，为什么会发生这种情况

  

getElementsByTagName是DOM接口的方法。它接受一个标签   将name命名为input并返回NodeList（某些浏览器选择返回   HTMLCollection而不是，这是好的，因为它是一个超集   节点列表）。

基本上，答案很简单，不同浏览器的行为方式不同（当涉及到Web开发时，您会发现在许多方面都是如此）。

因此，对问题的第二部分提出更为明确的答案。假设您拥有名为'test'的HTML元素和您想要第一个的ASSUMING，您所要做的就是引用返回数组的第一个元素，无论是NodeList还是HTMLCollection

var element = document.getElementsByName('test')[0];

如果你想确保你有元素，只需获取数组并检查它是否有＆gt; 0个元素

var element;
var elements = document.getElementsByName('test');
if (elements.length > 0)
{
    element = elements[0];
}

Answer 2

您使用的方法将返回一个数组，因此要回答您的问题，您需要执行以下操作：

var element = document.getElementsByName('test')[0];