实例讲解js怎么通过类名获得多个input对象

1. 前言

在编写JavaScript代码时，经常需要根据类名获取多个相同类型的元素。本文将介绍如何通过类名获得多个input对象，并提供代码实例。

2. 通过类名获取多个input对象

2.1 获取单个元素

在JavaScript中，获取单个元素通常使用getElementById方法或querySelector方法。但要获取多个相同类型的元素，则需要使用getElementsByClassName方法。这个方法返回一个 HTMLCollection 对象，其包含文档中所有指定类名的元素。

var input = document.getElementsByClassName('input-class');

上述代码中，我们通过类名获取多个input元素，它们都有同一个类名'input-class'。

2.2 遍历HTMLCollection对象

HTMLCollection对象并不是一个数组，它是一个类似数组的对象，可以使用下标访问其中的元素。但它没有数组的一些方法，例如push、pop、forEach等方法。因此，在处理HTMLCollection对象时，我们通常需要将其转化为数组。

在遍历HTMLCollection对象时，我们可以使用for循环，也可以使用ES6新增的Array.from方法将其转换为数组。

//使用for循环遍历HTMLCollection对象
for(var i=0; i<input.length; i++) {
    //do something
}
//使用Array.from方法遍历HTMLCollection对象
Array.from(input).forEach(function(element) {
    //do something
});

3. 实例：通过类名获取多个input对象

下面是一个简单的示例，根据类名获取多个input元素，并将其转化为数组遍历。

//根据类名获取多个input元素
var inputs = document.getElementsByClassName('input-class');
//将HTMLCollection对象转换为数组
var inputArray = Array.from(inputs);
//遍历数组
inputArray.forEach(function(element) {
    //获取input的value属性
    var inputValue = element.value;
    
    //将input的value属性输出到控制台
    console.log(inputValue);
});

上述示例中，我们根据类名获取多个input元素，然后将其转化为数组inputArray并遍历。在每个元素上，我们都执行了一个函数，该函数获取input的value属性并将其输出到控制台。

4. 总结

通过类名获得多个input对象是JavaScript开发中的常见操作。我们可以使用getElementsByClassName方法获取一个HTMLCollection对象，并将其转化为数组进行遍历。希望本文能够帮助到大家。