javascript - 使用 querySelectorAll 获取具有该类名的所有元素，而不仅仅是第一个

Question

大约 9 个月前，我放弃了 jquery，需要一个选择器引擎(没有所有麻烦，也不介意 ie<7 支持)，所以我通过创建此函数制作了 document.querySelectorAll 的简化版本:

// "qsa" stands for: "querySelectorAll"
window.qsa = function (el) {
  var result = document.querySelectorAll(el)[0];
  return result;
};

这在 95% 的时间里工作得很好，但我已经遇到这个问题有一段时间了，我研究了 mdn、w3c、SO，不要忘记 Google :) 但还没有找到原因的答案我只得到具有请求的类的第一个元素。 我知道只有返回的第一个元素是由末尾的“[0]”引起的，但是如果我删除它，该函数将无法工作，所以我尝试使用索引变量创建一个 for 循环，该索引变量会增加值取决于该类元素的长度，如下所示:

window.qsa = function (el) {
  var result, el = document.querySelectorAll(el);
  for(var i = 0; i < el.length; ++i) {
   result = el[i];
  }
  return result;
};

这又不起作用，所以我尝试了这样的 while 循环:

window.qsa = function (el) {
  var result, i = 0, el = document.querySelectorAll(el);
  while(i < el.length) {
    i++;
  }
  result = el[i];
  return result;
};

现在我开始想知道是否有什么作用？我对 document.querySelectorAll 感到非常沮丧...... 但我顽固的内心继续前进，我不断失败(分层循环)，所以我知道现在确实是问这些问题的时候了:

为什么它只返回该类的第一个元素而不是全部？

为什么我的 for 循环失败？

为什么我的 while 循环失败？

谢谢你，因为我们非常感谢任何/所有的帮助。

Answer 1

Why is it only returning the first element with that class and not all of them?

因为您明确地从结果中获取第一个元素并返回它。

Why does my for loop fail?

因为每次循环结束时都会用新值覆盖结果。然后你返回最后得到的东西。

Why does my while loop fail?

同样的原因。

<小时/>

如果你想要所有元素，那么你只需得到运行该函数的结果:

return document.querySelectorAll(el)

这将为您提供一个包含所有元素的 NodeList 对象。

<小时/>

既然你说你想要的，我将推测你真正的问题是什么(即为什么你认为它不起作用)。

您还没有向我们展示您如何处理运行该函数的结果，但我猜测您正在尝试将其视为一个元素。

它不是一个元素。它是一个NodeList，就像一个数组。

例如，如果您想更改元素的背景颜色，您可以这样做:

element.style.backgroundColor = "red";

如果要更改 NodeList 中每个元素的背景颜色，则必须依次更改每个元素的背景颜色:使用循环。

for (var i = 0; i < node_list.length; i++) {
    var element = node_list[i];
    element.style.backgroundColor = "red";
}