如何使用 JavaScript 从 HTML 输入数组中获取值？

在使用 JavaScript 进行前端开发时，我们通常需要从 HTML 输入元素中获取值，其中包括了从数组中获取值这种情况。本文将介绍如何使用 JavaScript 从 HTML 输入数组中获取值。

获取 HTML 输入数组的方法

在 HTML 中，我们可以使用 <input> 元素加上 type="text" 属性创建一个文本输入框，用户可以在其中输入内容。我们可以将多个这样的输入框组成一个数组，如下所示：

<input type="text" name="input[0]">
<input type="text" name="input[1]">
<input type="text" name="input[2]">

其中，每个输入框都有一个名字，而这些输入框的名字是以 [] 结尾的，这意味着它们将被作为一个数组来处理。如果我们想要获取这个数组中指定位置的元素，我们可以使用 document.getElementsByName() 方法来获取这个数组：

const inputArray = document.getElementsByName("input[]");

这样，我们就获取到了一个包含所有输入框的数组 inputArray。

从数组中获取值

现在我们已经获取到了一个 HTML 输入数组，接下来我们需要知道如何从中获取值。通常情况下，我们可以通过遍历这个数组来获取每个输入框中的值，如下所示：

const inputArray = document.getElementsByName("input[]");
const values = [];

for (let i = 0; i < inputArray.length; i++) {
  values.push(inputArray[i].value);
}

console.log(values);

在这个例子中，我们创建了一个空数组 values，然后遍历了输入框数组，并将每个输入框的值添加到 values 数组中。最后，我们使用 console.log() 来输出 values 数组的值。当用户在每个输入框中输入内容时，这个例子将会输出一个包含这些输入框的值的数组。

总结

在 JavaScript 中，从 HTML 输入元素数组中获取值是非常常见的操作。使用 document.getElementsByName() 方法，我们可以轻松地获取 HTML 输入元素数组。而通过遍历数组和获取每个元素的值，我们可以轻松地从输入元素数组中获取值，并在程序中使用这些值。