element.className仅返回“未定义”

Question

我正在尝试创建一个交互式的小画廊，人们可以在其中查看/选择一些图片。我用了一些来包含图片，并在其中添加了一些来表示所选的照片。然后，我输入了一些JS代码，以使用的className检查或取消选中照片。所以我的两个问题是：该代码未按预期运行。当我在导航器中跑动时，无法选择任何图片。控制台仅返回“未定义”，如下面的代码中所述。这是一些代码：这是我在JS中的第一次尝试，我真的不明白什么是行不通的，所以我希望您能得到答案或至少对我有一些提示。:)

Answer 1

如前面的答案中所述，getElementsByClassName方法返回具有您传递给该方法的类名称的元素的HTMLCollection。如果您需要访问任何项，则需要像数组一样进行操作。

例如，获取集合的第一个元素。

unselectedClass[0].className;

否则，您可以使用for循环来访问集合中的每个元素。

for (var i = 0; i < unselectedClass.length; i++) {

    var class = unselectedClass[i].className;

}

Answer 2

getElementsByClassName产生元素的集合。该className属性在该列表中的特定元素上可用。不在列表本身上。

Answer 3

问题是document.getElementsByClassName返回HTMLCollection和HTMLCollection。您应该检查className其元素。

您可以遍历它，然后获取className每个元素

for(let i = 0;i<unslectedClass.length;i++){

   console.log(unselectedClass[i].className);

}

或HTMLCollection使用Spread Operator将转换为实数组并使用forEach()

[...unselectedClass].forEach(x => console.log(x.className))