对象 HTMLcollection[0] 不断返回 undefined

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"))

我得到object HTMLCollection 。 如果我尝试类似alert(document.getElementsByClassName("my-list")[0])我会得到undefined 。 如何获得列表中的第一个href ？ 所以在这种情况下它将是"1" 。

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>

Answer 2

如果您在 HTML 标头中添加脚本，则可能会发生这种情况。 在本例中，您看到了HTMLCollection ； 但是，这些项目将为空。

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

Answer 3

另外，请务必检查您的代码，我在使用 querySelector 时遇到了这个问题。 如果您使用 querySelector 它只返回一个元素（迭代时将返回 undefined ），而 querySelectorAll 创建一个可以迭代的 html 集合。