同一类javascript的元素数组答案

【问题标题】：Array of element of the same class javascript同一类javascript的元素数组
【发布时间】：2015-02-27 12:08:22
【问题描述】：

如何获取具有相同类的元素值的数组？

当我这样做时，我只得到第一个元素，但我想要一个完整的数组：

var classes = document.querySelector(".klass").value;
alert(classes); //Outputs only the first element

我想得到一个完整的输入值数组：

<input type="text" class="klass" />
<input type="text" class="klass" />
<input type="text" class="klass" />

这可能吗？

【问题讨论】：

var elements = document.getElementsByClassName("klass"); ?
... 或改用document.querySelectorAll()。
说真的，为什么不赞成 querySelector 是一种在 JavaScript 中使用 css 选择器的方法？
除了帖子中的拼写错误之外，只要阅读documentation 就会让您明白这一点； )。
投反对票由个人决定，但对一个明显缺乏研究和/或关注的问题（例如querySelector 的拼写）投反对票并非不合理。 SO 不是众包 API 文档服务。

标签： javascript arrays html dom

【解决方案1】：

您需要遍历您的元素数组并获取每个元素的值。

var classes = document.querySelectorAll(".klass").value,
    values = [];

for(var i = 0; i < classes.length; i++) {
    values.push(classes[i].value);
}

请注意，这可能不如使用[].map 干净，而是good deal faster。

【讨论】：

为什么要将类数组推到另一个数组中，或者它只是为了确保一切正常？
您可以覆盖同一个数组（即classes[i] = classes[i].value），但由于潜在的问题/不一致，我更愿意避免这样做。不过，它会给您带来基本相同的结果。

【解决方案2】：

使用document.querySelectorAll 检索NodeList (see also the section "How can I convert NodeList to Array?")，然后将其转换为一个数组，并使用map 一个返回每个元素值的函数。

var classesNodeList = document.querySelectorAll(".klass");
var classes = Array.prototype.slice.call(classesNodeList).map(function(element) {
    return element.value;
});

更新

正如Ginden 的评论中所述，更短的方法是使用Function.prototype.call 将NodeList 传递给Array.prototype.map

var classesNodeList = document.querySelectorAll(".klass");
var classes = Array.prototype.map.call(classesNodeList, function(element) {
    return element.value;
});

【讨论】：

你甚至可以使用[].map.call(nodeList, func)。 ;)
是的，它更短 :)
您能否简化函数如何以数组或自变量的形式返回值，大多数此类和方法对我来说都是新的
@Maroxtn 我添加了上面描述的每个功能和特性的mdn文档的链接，这里描述太长了。
Object.setPrototypeOf(NodeList.prototype, Array.prototype); 或 NodeList.prototype.__proto__ = Array.prototype; 拥有所有数组方法

【解决方案3】：

您可以先使用querySelectorAll方法，然后使用数组的map函数来检索结果：

var elements = document.querySelectorAll('.klass');
var values = [].map.call(elements, function(e) {
  return e.value;
});

【讨论】：

【解决方案4】：

对于这样一个简单的 CSS 选择器表达式，我会使用 getElementsByClassName 并为其指定类名，而不是 querySelectorAll。 getElementsByClassName 通常比使用 querySelectorAll 快几个数量级。看到这个jsperf。

var classes = document.getElementsByClassName("klass"); // Do not use a period here!
var values = Array.prototype.map.call(classes, function(el) {
    return el.value;
});

getElementsByClassName 通常比querySelectorAll 快。浏览器已经按类名索引元素以优化 CSS 转换的速度。 getElementsByClassName 返回一个HTMLCollection 元素，因此它没有Array 方法，您也需要在此使用Array.prototype...。

【讨论】：