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]添加到圆括号中。

＆＃13;

**UPDATE**: Use `window.onload` to perform operations after all DOM elements 
are loaded.


window.onload = function()
{ 
   alert((document.getElementsByClassName("my-list"))[0])
}

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

此外，只要确保检查您的代码，就可以使用querySelector来解决此问题。如果您使用querySelector，则它仅返回一个元素（迭代时将返回未定义），而querySelectorAll创建一个html集合，您可以对其进行迭代。

对象HTMLcollection [0]继续返回undefined

3 个答案: