如何在JavaScript中用getElementsByTagName动态获取输入框的name与value？

没问题，我来帮你搞定这个纯JS的实现方案～

首先，你提到的getElementsByTagName('input')会返回一个HTMLCollection（类数组对象），它包含页面上所有的input元素。要给每个输入框都绑定keyup事件，你需要遍历这个集合，而不是只取索引[0]的第一个元素。

而且在事件处理函数里，不用纠结this的绑定问题，直接用事件对象的target属性就能精准拿到当前触发事件的输入框元素，这是更直观也更可靠的方式。

完整实现代码 #

// 获取所有input元素
const inputFields = document.getElementsByTagName('input');

// 遍历HTMLCollection，给每个input绑定keyup事件
for (const input of inputFields) {
  input.addEventListener('keyup', function(e) {
    // 通过事件对象的target获取当前触发事件的输入框
    const currentInput = e.target;
    // 获取name和value
    const inputName = currentInput.name;
    const inputValue = currentInput.value;
    
    // 这里可以做你需要的处理，比如打印或者传递给其他函数
    console.log(`当前输入框name：${inputName}，值：${inputValue}`);
    // 如果要调用你自己的setInputValueWhileOnChange方法，也可以这么传
    // this.setInputValueWhileOnChange(inputName, inputValue);
  });
}

// 假设你的setInputValueWhileOnChange方法是这样的
function setInputValueWhileOnChange(name, value) {
  // 处理逻辑
  console.log('处理后的结果：', name, value);
}

关键说明： #

• 遍历HTMLCollection：用for...of循环可以直接遍历这个类数组对象，给每个input都绑定事件，避免只绑定第一个元素的问题。
• 事件对象target：e.target永远指向当前触发事件的DOM元素，不管你怎么绑定事件，它都能精准拿到当前输入框，比依赖this更不容易出问题（比如箭头函数里this不会指向元素的情况）。
• 避免索引[0]：通过遍历整个集合，自然就不需要手动指定索引，实现了动态绑定所有输入框的需求。

如果你需要在事件处理函数里调用类中的方法（比如你原来的this.setInputValueWhileOnChange），只要确保this的指向正确就行——如果是在类的方法里写这段代码，用箭头函数作为事件处理函数的话，this会绑定到类实例：

// 类中的写法示例
class InputHandler {
  constructor() {
    const inputFields = document.getElementsByTagName('input');
    for (const input of inputFields) {
      // 用箭头函数，this会指向InputHandler的实例
      input.addEventListener('keyup', (e) => {
        const currentInput = e.target;
        this.setInputValueWhileOnChange(currentInput.name, currentInput.value);
      });
    }
  }

  setInputValueWhileOnChange(name, value) {
    console.log(`类方法处理：${name} = ${value}`);
  }
}

// 实例化使用
new InputHandler();

这样就完全满足你的需求了：纯JS实现、动态绑定所有输入框、不用索引[0]、能获取当前输入框的name和value。

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