Question

我有以下代码可以在HTML集合内返回1个元素：

var message = document.getElementsByClassName('short-description shipp-info'); //Returns collection with 1 div element, which is what I want

//Returned value from message;
    HTMLCollection []
    0: div.short-description.shipp-info
    length: 1
    __proto__: HTMLCollection

但是，当我尝试获取第一个元素时，它返回未定义的内容：

    var message = document.getElementsByClassName('short-description shipp-info')[0]; //Returns undefined
     //or
    message[0]; //Returns undefined

这是我始终从HTML集合中检索第一个元素的方式，并且一直有效到现在。我不知道为什么它不起作用。除了未定义之外，控制台中也没有报告任何错误。

Answer 1

getElementsByClassName是一个实时HTML集合。因此，它将在页面中添加和删除元素时增加和减少元素。因此，如果添加一个元素，它会出现在您的集合中。下面的例子

var test = document.getElementsByClassName("foo");
console.log("before", test.length);
var d = document.createElement("div");
d.className = "foo";
document.body.appendChild(d)
console.log("after add", test.length);
d.className = "bar";
console.log("after remove class", test.length);

因此，可能正在发生的事情是您尝试在元素出现在页面上之前对其进行引用。登录时，您可能会看到浏览器的延迟加载，其中的地方是向您显示当前时间点的数据，而不是添加时间。

如何获得HTML集合的第一个元素？

1 个答案: