获取 JavaScript 中的元素名称属性

Question

如何获取 JavaScript 中的元素 name 属性？

HTML :

<input class="so" name="Name" value="bob"></input>
<input class="so" name="LastName" value="Feyzi"></input>
<input class="so" name="Email"></input>
<input class="so" name="Address"></input>
<input type="submit"></input>

JavaScript :

var person={};
var cars = document.querySelectorAll(".so");
for (i = 0; i < cars.length; i++) { 
  var elname = document.getElementByClassName('.so')[i].getAttribute('name');
  //var eln = document.getElementsByTagName("input")[i].getAttribute("name");
  var vala = document.querySelectorAll('.so')[i].value;
  //alert(vala);
  alert(elname);
}

在运行脚本之后，我希望 person object 设置为以下数据：

person {
    Name: "bob",
    LastName: "Feyzi",
    Email: "",
    Adderss: ""
}

JSFiddle

Answer 1

使用您已经通过 querySelectorAll 找到的集合来获取 value 和 name 属性的值：

var person = {}
var cars = document.querySelectorAll(".so")
for (i = 0; i < cars.length; i++) { 
  person[cars[i].name] = cars[i].value
}
console.log(person)

JSFiddle

Answer 2

因为 getElementByClassName 不存在（而且它在您的脚本中也没有用）。使用这个：

 var person={};
 var cars = document.querySelectorAll(".so");
 for (i = 0; i < cars.length; i++) { 
       alert(cars[i].name)
 }

Answer 3

首先，使用cars变量而不是每次都调用querySelectorAll。其次，使用 addEventListener 在点击时执行代码。

Fiddle: http://jsfiddle.net/guyavunf/3/

代码：

// HTML
<input class="so" name="Name" value="bob"></input>
<input class="so" name="LastName" value="Feyzi"></input>
<input class="so" name="Email"></input>
<input class="so" name="Address"></input>
<input class="submit" type="submit"></input>

// JS
document.querySelector('.submit').addEventListener('click', function() {
    var person={};
    var cars = document.querySelectorAll(".so");
    for (i = 0; i < cars.length; i++) { 
        var name = cars[i].name;
        var value = cars[i].value;
        alert(name + ': ' + value);
    }
});

获取 JavaScript 中的元素名称属性

Get the element name attribute in JavaScript

javascript

arrays

JSFiddle

JSFiddle