为什么我在一个练习中的 button.forEach(function(button) 上出现错误，而在另一个类似的练习中没有出现错误

如何解决为什么我在一个练习中的 button.forEach(function(button) 上出现错误，而在另一个类似的练习中没有出现错误

我有两个类似的练习，在第一个练习中我没有遇到问题：

在forEach中没有问题的练习

// Change background color (basic)
const buttons = document.querySelectorAll('main button');
const body = document.querySelector('body');

buttons.forEach(function (button) {
    console.log('textContent',button.textContent);
    button.addEventListener('click',function (e) {
        console.log('Je hebt geklikt op',button.textContent);
        body.style.backgroundColor = button.textContent;
    });
});

在第二个练习中，我想知道为什么在使用选择器“.border-gray”时会得到 NULL。在某个时候，他开始抱怨并给了我这个错误 Uncaught TypeError: buttons.forEach is not a function at bgcolor_advanced.js:5。起初他并没有抱怨它，在第一个练习中，它完全相同并且有效。为什么它会在第二个出现问题？

练习 forEach 有问题的地方

const buttons = document.querySelector('main button');
const klasse = document.querySelector('div.border-gray');
console.log(buttons);
buttons.forEach(function(button) {
    console.log('textContent',button.textContent);
    klasse.style.backgroundColor = button.textContent;
    button.addEventListener('click',function(e) {
        console.log('Je hebt geklikt op',button.textContent);
        klasse.style.backgroundColor = button.textContent;
    });
});

第二个问题是为什么我不能成功地从“const klasse”中得到一些东西。总是说它是未定义的。

这是我的 html：

<main class="container">
        <h1>Change background color <small>advanced</small></h1>
        <div>
            <button type="button" class="primary">lightsalmon</button>
            <button type="button" class="primary">palegreen</button>
            <button type="button" class="primary">#49eae7</button>
            <button type="button" class="primary">hotpink</button>
            <button type="button" class="secondary">reset</button>
        </div>
        <div class="border-gray">

非常感谢

解决方法

.querySelectorAll() 返回元素的 NodeList，即使只有一个匹配的元素。 .querySelector() 返回第一个匹配的元素。

在您的第一个练习中，您正确使用 .querySelectorAll() 来获取所有按钮的列表，然后您使用 .forEach() 对其进行迭代在第二个练习中，您使用 .querySelector()，它只返回一个按钮。因此，当您尝试使用 .forEach() 对其进行迭代时，会出现错误。

同样

您致电：

klasse.textContent

正在尝试从元素的列表中检索 textContent 属性。该属性仅适用于单个元素。遍历列表并以这种方式访问属性 - 或 - 如果您只有一个类为“.border-gray”的元素，请切换到 .querySelector()

希望这会有所帮助！