Question

这是我的html和javascript结构，我用参数获取我的属性到目前为止

var input  =  document.getElementById("username").attributes;
var ul     =  document.createElement("ul");

for(var i=0; i<input.length;i++){
  var li = document.createElement("li");
  var data = input[i].name + ":" + input[i].value;
  var text = document.createTextNode(data);
  li.appendChild(text);
  ul.appendChild(li);
  document.body.appendChild(ul);
}

  <input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username">

但如果我想得到我的所有输入数据，它只给出第一个输入属性。例如：

var input = document.getElementsByTagName("input").attributes;
var ul = document.createElement("ul");

for (var i = 0; i < input.length; i++) {
  var li = document.createElement("li");
  var data = input[i].name + ":" + input[i].value;
  var text = document.createTextNode(data);
  li.appendChild(text);
  ul.appendChild(li);
  document.body.appendChild(ul);
}

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username">

<input type="password" id="password" name="password" class="form-control" data-id="2" placeholder="Enter your password">

这个例子给了我一个长度错误，如果你看看它会看到

所以我正在尝试学习纯javascript，这就是为什么我不会在任何项目中使用我试图理解它的逻辑

Answer 1

getElementsByTagName与getElementById不同。它返回一个类似数组的对象。

尝试：var input = document.getElementsByTagName("input")[0].attributes;

或var input = document.querySelector("input").attributes;

＆＃13;

var input = document.getElementsByTagName("input")[0].attributes;
var ul = document.createElement("ul");

for (var i = 0; i < input.length; i++) {
  var li = document.createElement("li");
  var data = input[i].name + ":" + input[i].value;
  var text = document.createTextNode(data);
  li.appendChild(text);
  ul.appendChild(li);
  document.body.appendChild(ul);
}

＆＃13;

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username">

<input type="password" id="password" name="password" class="form-control" data-id="2" placeholder="Enter your password">

＆＃13;

如果您想从每个元素获取属性，只需实现第二个循环。

＆＃13;

var input = document.getElementsByTagName("input");
var ul = document.createElement("ul");

for (var k = 0; k < input.length; k++) {
  for (var i = 0; i < input[k].attributes.length; i++) {
    var li = document.createElement("li");
    var data = input[k].attributes[i].name + ":" + input[k].attributes[i].value;
    var text = document.createTextNode(data);
    li.appendChild(text);
    ul.appendChild(li);
    document.body.appendChild(ul);
  }
}

＆＃13;

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username">

<input type="password" id="password" name="password" class="form-control" data-id="2" placeholder="Enter your password">

＆＃13;

ES6 解决方案。

＆＃13;

let elems = document.querySelectorAll('input');
Array.from(elems).forEach(v => {
  Array.from(v.attributes).forEach(c => {
    document.write(`${c.name}: ${c.value}<br>`);
  })
})

＆＃13;

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username">

<input type="password" id="password" name="password" class="form-control" data-id="2" placeholder="Enter your password"><br>

＆＃13;

Answer 2

您需要为输入中的每个输入推送属性。然后输入将是一个数组数组。因此，您需要使用两个循环访问输入数组中的每个数组。

＆＃13;

var input = [];
Array.from(document.getElementsByTagName("input")).forEach(function(el){
 input.push(el.attributes);
});
var ul = document.createElement("ul");

for (var i = 0; i < input.length; i++) {
 for (var j=0; j<input[i].length; j++){
  var li = document.createElement("li");
  var data = input[i][j].name + ":" + input[i][j].value;
  var text = document.createTextNode(data);
  li.appendChild(text);
  ul.appendChild(li);
  document.body.appendChild(ul);
}
}

＆＃13;

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username">

<input type="password" id="password" name="password" class="form-control" data-id="2" placeholder="Enter your password">

＆＃13;

Answer 3

var input = document.getElementsByTagName("input").attributes;
for (var i = 0; i < input.length; i++) {
var this_input = document.getElementsByTagName("input")[i].attributes;
  var li = document.createElement("li");
  var data = this_input.name + ":" + this_input.value;
  var text = document.createTextNode(data);
  li.appendChild(text);
  ul.appendChild(li);
  document.body.appendChild(ul);
}

如何获取输入的属性及其价值？

3 个答案: