JavaScript中NodeList元素获取与.value属性的技术疑问

为什么不用input[0][0]，直接input[i].value就行？ #

document.querySelectorAll('.input')返回的是NodeList——这是一个类数组对象，里面直接存储的是匹配到的每一个DOM元素（这里就是5个<input>标签），并不是二维数组。

举个实际的例子：如果页面上有5个带.input类的输入框，执行const inputs = document.querySelectorAll('.input')后：

• inputs[0]就是第一个<input>元素本身
• inputs[1]是第二个，以此类推

你之前以为要input[0][0]，大概率是把NodeList和其他嵌套的二维结构搞混了，但NodeList的每一项都是直接的DOM节点，所以直接用索引访问就能拿到对应的输入框，再通过.value获取值完全合理。

.value属性的具体作用是什么？ #

.value是表单元素（包括<input>、<textarea>、<select>等）的核心内置属性，主要有两个核心作用：

• 获取值：读取用户在表单元素中输入或选择的内容，比如文本输入框里的文字、单选框的选中值、下拉菜单的选中项值
• 设置值：主动给表单元素赋值，比如inputs[0].value = "hello"，就能把第一个输入框的内容直接设置成hello

不同类型的input（比如type="checkbox"、type="radio"），.value的行为会略有区别，但对于Wordle里用的文本类输入框，它就是直接对应输入框内的文本内容。

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