Typescript中如何遍历HTML元素的Nodelist并获取对应值？

你通过document.querySelectorAll获取到的是类数组结构的NodeList对象，可通过以下几种常用方式提取所有输入框的对应值：

• 方法1：传统for循环遍历

// 用于存储所有输入框值的数组
const inputValues = []
for (let i = 0; i < paragraphSubEl.length; i++) {
  // 输入框的取值对应元素的value属性
  inputValues.push(paragraphSubEl[i].value)
}

• 方法2：ES6扩展运算符转数组后批量提取
  通过扩展运算符将NodeList转为普通数组后，可直接调用数组的map方法批量取值，代码更简洁：

const inputValues = [...paragraphSubEl].map(el => el.value)

• 方法3：调用NodeList自带的forEach方法遍历
  现代浏览器原生支持NodeList实例调用forEach方法，无需额外转数组：

const inputValues = []
paragraphSubEl.forEach(el => inputValues.push(el.value))

注意：如果你的选择器可能选中非输入框元素，建议取值前增加元素类型判断，避免读取不存在的value属性引发报错。

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