时间戳

首页 > 解决方案 > 如何获取 HTML 集合的第一个元素？

javascript - 如何获取 HTML 集合的第一个元素？

问题描述

我有以下代码在 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 集合中检索第一个元素的方式，并且它一直有效到现在。我不知道为什么它不起作用。除了未定义之外，控制台中也没有报告任何错误。

标签： javascript

解决方案

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

所以可能发生的事情是您试图在页面上之前引用该元素。当您登录时，您可能会看到浏览器延迟加载，其中显示的是当前时间点的数据，而不是添加时的数据。

推荐阅读