对象HTMLCollection [0] 持续返回未定义

Question

假设我们有如下内容：

<a href="1" class="my-list">1</a>
<a href="2" class="my-list">2</a>
<a href="3" class="my-list">3</a>

当我尝试像这样做某些事情时：

alert(document.getElementsByClassName("my-list"))

我得到了对象HTMLCollection。如果我尝试像这样的事情alert(document.getElementsByClassName("my-list")[0])，我会得到未定义undefined。如何获取列表中的第一个href？所以在这种情况下，它将是"1"。

- Bob John

Answer 1

请在 Fiddler 中查看此内容。将 document.getElementsByClassName("my-list") 放在圆括号中，并在其后添加索引 [0]。

**UPDATE**: Use `window.onload` to perform operations after all DOM elements 
are loaded.


window.onload = function()
{ 
   alert((document.getElementsByClassName("my-list"))[0])
}

<a href="http//:www.google.com/" class="my-list">1</a>
<a href="http//:www.facebook.com/" class="my-list">2</a>
<a href="http//:www.sample.com/" class="my-list">3</a>

- Saravana Kumar

---

我应该提到，我不总是知道值“1”，“2”或“3”。它们可以是任何值，但我只是想返回第一个（在这个例子中是“1”）。 - Bob John

@Bob John: [1]不是值，它指定了索引。 - Saravana Kumar

让我们在聊天中继续这个讨论。 - Saravana Kumar

@Bob John：这将使用 jQuery 完成。查看此链接：http://jsfiddle.net/mwpmk9kk/14/ - Saravana Kumar

谢谢！我感激你的帮助。 - Bob John

Answer 2

如果您将脚本添加到HTML头部，则可能会出现此问题。在这种情况下，您会看到“HTMLCollection”，但是项目将为空。

请将脚本移动到HTML正文的底部。

- Meysam Izadmehr

Answer 3

另外，请务必检查您的代码，我曾因使用querySelector而遇到过这个问题。如果您使用querySelector，则仅返回一个元素（在迭代时将返回未定义），而querySelectorAll则创建了一个HTML集合，您可以通过它进行迭代。

- Michael Riccio