Question

<form id="shape_layout">
    Color: <br/>
    <input type="text" name="background" id="background" value="red" /> <br/>
    <br/> Height(px): <br/>
    <input type="text" name="height" id="height" value="100px" /> <br/>
    <br/> Width(px): <br/>
    <input type="text" name="width" id="width" value="100px" /> <br/>
</form>

这是我的表单，我希望在javascript中存储“默认值”。

类似的东西：

document.getElementById("shape_layout").elements;
>>> this gives me [input#background, input#height, input#width]
but I would like it to give me the default values:
>>> ["red","100px","100px"]

Answer 1

let elems = Array.from(document.querySelectorAll("#shape_layout input[value]")
           , el => el.value);

Answer 2

其他答案很好，但缺乏对发生了什么的解释，我不喜欢。

您当前的代码是document.getElementById("shape_layout").elements;，它是一个类似于数组的对象。让我们首先编写一个函数，它将一个项作为参数，并返回应该替换旧项的新项。

function(oldItem){
  return oldItem.value;
}

这可以使用箭头符号重写 oldItem => oldItem.value。

正如guest271314所提到的，我们可以创建一个新的数组，它也将函数应用于每个元素，如此

Array.from(listLikeObject, function_to_use);

让我们插入数据，

Array.from(document.querySelectorAll("#shape_layout input[value]"), el => el.value)。

麻烦的是，这与Internet Explorer不兼容，因为

不支持箭头功能
Array.from不受支持

基本的for循环可能在这里最兼容。这是Ionut的回答。

var theArray = []
for(var i = 0; i < document.querySelectorAll("#shape_layout input[value]").length; i++){
  theArray.push(document.querySelectorAll("#shape_layout input[value]")[i]);
}

我现在要逐行打破这个。

theArray是一个存储输出的数组。 var theArray = [];将其设置为空数组。

for(var i = 0; i < document.querySelectorAll("#shape_layout input[value]").length; i++)这可以分为三个部分。

var i = 0;一开始就将i设置为0。
i < document.querySelectorAll("#shape_layout input[value]").length是每次迭代循环必须满足的条件。这个条件确保有一个列表项目的索引为i，如果没有，那么它将退出循环。
i++是i = i + 1的简写，使i 1比以前更大。这发生在循环的每次迭代结束时，就在检查条件之前。

thisArray.push将追加到数组的末尾。

document.querySelectorAll("#shape_layout input[value]")[i]是获取数组中i项的索引表示法。

Answer 3

您可以使用简单的for循环和push()：

来完成此操作

var elements = document.querySelectorAll("#shape_layout input[type=text]");
  var arr = [];
  for (var i = 0; i < elements.length; i++) {
    if (typeof elements[i].value !== "undefined") {
        arr.push(elements[i].value);
      }
    }

  console.log(arr);

<form id="shape_layout">
    Color: <br/>
    <input type="text" name="background" id="background" value="red" /> <br/>
    <br/> Height(px): <br/>
    <input type="text" name="height" id="height" value="100px" /> <br/>
    <br/> Width(px): <br/>
    <input type="text" name="width" id="width" value="100px" /> <br/>
</form>

Answer 4

直截了当的方法：

arr=[];

form=document.getElementById('shape_layout');
inputs=form.querySelectorAll('input');
for(i=0;i<inputs.length;i++) {
arr.push(inputs[i].value);
}
console.log(arr);

等待一些额外的单行程。：）

Sexier™，来自MDN的好例子：

inputs=document.querySelectorAll('#shape_layout input[type=text]');
vals=Array.prototype.map.call(inputs , function(el){
return el.value;
})
console.log(vals);

如何使用javascript获取元素表单值数组？

4 个答案: