javascript - 如何存储和打印来自 document.getElementsByClassName 的元素？

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

使用Array.from把它变成一个数组，同时映射出value:

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

.as-console-wrapper { max-height: 100% !important; top: auto; }

<input class="data" value="123">
<input class="data" value="456">