Question

我正在从HTML表单中读取值。假设有10个值。我想获取这些值并将它们存储在数组中，以便以后可以访问它们并对其进行加/减/乘运算。我也在尝试打印这些值。

我收到从HTMLCollection到HTMLDivElement等的各种错误。我尝试了.nodeValue，.value。查找将HTMLCollection转换为数组。但没有运气。

目前我已经尝试了所有方法，但似乎无法弄清楚。这是我目前的情况。

有人能在这里指出正确的方向吗？谢谢

var valueArray = new Array();
valueArray = document.getElementsByClassName("data");
document.write(valueArray[0]);

var valueArray = document.getElementByClassName("data");
for (var i = 0; i < 10; ++i)
{
   document.write(valueArray[i]);
}

Answer 1

我认为您想获取具有特定类的所有元素的value属性数组。您可以使用querySelectorAll()和map()

var valueArray = [...document.querySelectorAll(".data")].map(x => x.value);

如果要加/乘...值，则应使用一元加+

将其转换为数字

var valueArray = [...document.querySelectorAll(".data")].map(x => +x.value || x.value);

下面是一个演示。

var valueArray = [...document.querySelectorAll(".data")].map(x => +x.value || x.value);
console.log(valueArray)

<input value="55" class="data" />
<input value="90" class="data" />

Answer 2

您需要执行以下操作才能将HTMLCollection放入数组中：

var elements = document.getElementByClassName("data");
var arrayOfElements = [...elements];

首先获取方法getElementsByClassName()返回的HTMLCollection，然后将其HTMLCollection散布到数组中。您也可以使用Array.from()：

var arrayOfElements = Array.from(elements);

示例，还包括到值的映射：

var elements = document.getElementsByClassName("data");
var arrayOfElements = [...elements].map(e => e.value);
// Or:
// var arrayOfElements = Array.from(elements, e => e.value);

console.log(arrayOfElements);

.as-console {background-color:black !important; color:lime;}

<input id="i1" type="text" class="data" value="val1">
<input id="i2" type="text" class="data" value="val2">

如果您需要将values保存为数字，则可以使用Unary Plus：

var arrayOfElements = [...elements].map(e => +e.value);

Answer 3

使用y1将其变成一个数组并同时映射y2：

Array.from

value

const values = Array.from(document.getElementsByClassName("data"), ({ value }) => parseInt(value));
console.log(values);

如何存储和打印document.getElementsByClassName中的元素？

3 个答案: