如何在JavaScript中正确获取button元素的value值，避免返回undefined

• document.querySelectorAll() 返回的是包含所有匹配元素的 NodeList 类数组集合，而非单个DOM元素对象，集合本身不存在value属性，因此直接访问会返回undefined。

场景1：获取单个指定button的value #

如果只需要获取某一个button的value，可选择两种写法：

• 使用document.querySelector()直接匹配单个元素：

// 匹配页面第一个button元素
const button = document.querySelector("button");
console.log(button.value); // 输出 7

• 从querySelectorAll返回的集合中按下标取对应元素：

const buttons = document.querySelectorAll("button");
// 获取第二个button（集合下标从0开始计数）
const targetButton = buttons[1];
console.log(targetButton.value); // 输出 8

场景2：获取所有button的value #

如果需要拿到全部button的value，遍历NodeList集合即可：

const buttons = document.querySelectorAll("button");
const valueList = [];
buttons.forEach(btn => {
  valueList.push(btn.value);
})
console.log(valueList); // 输出 ['7','8','9']

内容的提问来源于stack exchange，提问作者HannahO