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

【问题标题】：How to get control id from Object HTML Collection?如何从对象 HTML 集合中获取控件 ID？
【发布时间】：2014-04-02 13:14:18
【问题描述】：

我想获取控件 id 以便我可以将事件附加到这个 id，代码是：

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

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

谁能告诉我为什么会发生这种情况以及如何通过 Object HTMLCollection 获取控件的 id？

【问题讨论】：

您可以使用console.log(t)代替警报t，这在大多数情况下会在控制台管理器中为您提供更多信息
您为什么不想使用 document.getElementById() ？这是最快的方式，所有浏览器都支持
我不明白，你用t[0].id 得到了你想要的，那有什么问题？
我认为您需要阅读 this question 和 this question 才能更好地处理这个问题
因为 name 它不像 id 那样单义，getElementsByName 返回一个 ARRAY，大多数时候只有 1 个元素但数组。不使用 getElementById 你需要通过这个数组...

【解决方案1】：

看来您有两个问题：

1) 谁能告诉我为什么会这样

和

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

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

getElementsByTagName 是 DOM 接口的方法。它接受一个标签名称作为输入并返回一个 NodeList（一些浏览器选择返回取而代之的是 HTMLCollection，这没关系， 因为它是节点列表）。

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

这还包含对您的问题的答案，即为什么会发生这种情况

getElementsByTagName 是 DOM 接口的方法。它接受一个标签名称作为输入并返回一个 NodeList（一些浏览器选择返回 HTMLCollection 代替，这没关系，因为它是节点列表）。

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

因此，对您问题的第二部分进行更详细的回答。假设您有名为“test”的 HTML 元素并假设您想要第一个，您所要做的就是引用返回数组的第一个元素，无论它是 NodeList 还是 HTMLCollection

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

如果你想确保你得到了元素，只需获取数组并检查它是否有 > 0 个元素

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

【讨论】：

嗨，var element = document.getElementsByName('test')[0];我在 Firefox 上运行的同一行它给了我准确的结果，但在 IE 上它显示未定义。
@awaisabbasi，您的 HTML 文档使用什么 DOCTYPE？你用的是什么版本的IE？
您在文件中使用的是什么 DOCTYPE？

【解决方案2】：

您使用的方法将返回一个数组，因此要回答您的问题，您需要这样做：

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

【讨论】：