js如何通过类名获得多个input对象

在JavaScript中，我们经常需要通过类名来获取页面上的多个元素，尤其是当这些元素是<input>标签时。本文将介绍如何使用JavaScript通过类名获取多个<input>对象，并对其进行操作。

1. 使用document.getElementsByClassName方法

document.getElementsByClassName是JavaScript中一个常用的方法，它可以通过类名获取页面上的所有元素。该方法返回一个HTMLCollection对象，其中包含了所有具有指定类名的元素。

// 获取所有类名为 'input-class' 的 input 元素
const inputs = document.getElementsByClassName('input-class');

// 遍历 HTMLCollection 对象
for (let i = 0; i < inputs.length; i++) {
    console.log(inputs[i].value); // 输出每个 input 的值
}

需要注意的是，HTMLCollection是一个动态集合，当页面上的元素发生变化时，集合会自动更新。

2. 使用document.querySelectorAll方法

document.querySelectorAll是另一个常用的方法，它可以通过CSS选择器获取页面上的所有匹配元素。该方法返回一个NodeList对象，其中包含了所有匹配的元素。

// 获取所有类名为 'input-class' 的 input 元素
const inputs = document.querySelectorAll('input.input-class');

// 遍历 NodeList 对象
inputs.forEach(input => {
    console.log(input.value); // 输出每个 input 的值
});

与HTMLCollection不同，NodeList是一个静态集合，即使页面上的元素发生变化，集合也不会自动更新。

3. 处理获取到的元素

无论是使用document.getElementsByClassName还是document.querySelectorAll，获取到的元素都可以通过遍历来进行操作。例如，我们可以修改这些<input>元素的值、添加事件监听器等。

// 修改所有类名为 'input-class' 的 input 元素的值
const inputs = document.querySelectorAll('input.input-class');
inputs.forEach(input => {
    input.value = '新值';
});

// 为所有类名为 'input-class' 的 input 元素添加事件监听器
inputs.forEach(input => {
    input.addEventListener('change', function() {
        console.log('Input value changed:', this.value);
    });
});

4. 总结

通过类名获取多个<input>对象是JavaScript中常见的操作。我们可以使用document.getElementsByClassName或document.querySelectorAll来实现这一目标。前者返回一个动态的HTMLCollection，后者返回一个静态的NodeList。根据具体需求选择合适的方法，并对获取到的元素进行相应的操作。

希望本文对你理解如何通过类名获取多个<input>对象有所帮助！