NodeList = static collection of html NodeList 是通过 document.querySelectorAll() 返回的一组节点集合。 它不是数组，但可以用 .forEach() 遍历。
// ================= 选择所有带有 .myButtons 类的按钮 ========================
// querySelectorAll() 会返回一个 “NodeList” （节点列表）
// NodeList 类似数组，可以使用 forEach() 遍历
let buttons = document.querySelectorAll(".myButtons");
// console.log(buttons); // 可以打印出来看结构（NodeList）
// ======================== 为每个按钮设置样式和文字 ========================
// 使用 forEach() 遍历 NodeList 中的每个按钮
buttons.forEach(button => {
button.style.backgroundColor = "green"; // 设置背景颜色
button.textContent += " hi"; // 在按钮文字后加上 " hi"
});querySelectorAll() 返回的 NodeList 是 静态列表（Static NodeList），当你后来在 DOM 中新增或删除元素时，它 不会自动更新。
如果你想获取最新的列表，必须 重新调用 querySelectorAll()。
// ======================== 创建一个新的按钮元素 ========================
// 使用 document.createElement() 创建一个新的 <button> 元素（暂存在内存中）
const newButton = document.createElement("button");
// 设置按钮文字
newButton.textContent = "button 5";
// 给新按钮添加相同的类名，确保样式一致
newButton.classList = "myButtons";
// 将新按钮添加到页面 <body> 的末尾
document.body.appendChild(newButton);
// ======================== 重新选择一次所有按钮 ========================
// 因为旧的 NodeList 没有自动更新，所以需要重新选择一次
buttons = document.querySelectorAll(".myButtons");
// ======================== 为所有按钮添加鼠标事件监听器 ========================
// 遍历所有按钮，为每个按钮添加三个事件
buttons.forEach(button => {
// 点击事件：按钮变番茄红
button.addEventListener("click", event => {
event.target.style.backgroundColor = "tomato";
});
// 鼠标悬停事件：按钮变浅蓝色
button.addEventListener("mouseover", event => {
event.target.style.backgroundColor = "lightblue";
});
// 鼠标移出事件：按钮变棕色
button.addEventListener("mouseout", event => {
event.target.style.backgroundColor = "brown";
});
});