在javascript文件中，我选择相同的类元素与查询选择器都像这样…
const buttons = document.querySelectorAll(".button");
在html文件中，我这样写…
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<script src="index.js"></script>
<button class="button" value="rock" style="background-color: rgb(240, 20, 20)"></button>
<button class="button" value="paper" style="background-color: rgb(20, 240, 20)"></button>
<button class="button" value="scissor" style="background-color: rgb(20, 20, 240)"></button>
</body>
</html>
选择元素后，我尝试控制"按钮"。但我得到的是nodelist(0)你可以在下图中看到它…
输入图片描述
我看了所有的教程，学会了怎么做。我也做了同样的事情，但结果并不是我所期望的。谁能告诉我，我犯了一个错误，还是我需要添加什么?
导入js脚本文件footer.
并等待DOM加载document.addEventListener("DOMContentLoaded", function(){
const buttons = document.querySelectorAll(".button");
console.log(buttons);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<button class="button" value="rock" style="background-color: rgb(240, 20, 20)"></button>
<button class="button" value="paper" style="background-color: rgb(20, 240, 20)"></button>
<button class="button" value="scissor" style="background-color: rgb(20, 20, 240)"></button>
<script src="index.js"></script>
</body>
</html>可以使用node作为数组因为所有的.button相同的类名称在所有按钮，这就是为什么所有的按钮都在一个NodeList
可以通过索引访问NodeList。就像buttons[0]或buttons[1]或buttons[2]
const buttons = document.querySelectorAll(".button");
console.log(buttons[2])
此代码控制台蓝色按钮