使用querySelector获取包含类的所有元素

Question

要更改类中的某些样式，我正在使用querySelector()：

el.querySelector('.fa fa-car').style.display = "none";

这对于一个元素来说效果很好，但是如果包含该类的元素更多，而我想将所有元素的显示都更改为无，则此命令只会删除它的第一次出现而不会影响下一个。

我尝试用querySelectorAll()来做到这一点：

 el.querySelectorAll('.fa fa-car').style.display = "none";

但是此消息返回一条错误消息：

  

html2canvas：TypeError：无法设置未定义的属性“显示”

关于如何获取包含特定类的所有元素并对其执行操作的任何想法？

Answer 1

querySelectorAll()返回元素的集合。要更改其样式，您需要遍历它们。

还请注意，您的选择器似乎无效。给定FontAwesome类规则，我想您需要同时选择两个类。试试这个：

Array.from(el.querySelectorAll('.fa.fa-car')).forEach(function() {
  this.style.display = "none";
});

或者，当您使用jQuery标记问题时，您可以将所有内容简化为：

$('.fa.fa-car').hide();

Answer 2

  

Element方法querySelectorAll()返回一个静态（非实时）NodeList，该NodeList表示与指定选择器组匹配的文档元素列表。

使用Document.querySelectorAll()获取所有元素。然后使用forEach()在每个元素中设置样式：

var elList = documnet.querySelectorAll(.fa.fa-car);
elList.forEach(el => el.style.display = "none");

请注意：某些较旧版本的IE（<8）不支持querySelectorAll()。在这种情况下，请使用Array.from(documnet.querySelectorAll(.fa.fa-car))

Answer 3

querySelector仅选择一个元素，要选择所有元素，您可以使用querySelectorAll

[].map.call(el.querySelectorAll('.fa fa-car'), n => { n.style.display = 'none'; })

Answer 4

使用方法querySelectorAll（） 参见https://www.w3schools.com/jsref/met_document_queryselectorall.asp

收到错误消息是因为querySelectorAll返回一个数组。对其进行迭代，然后使用style.display

Answer 5

您可以通过迭代此类的出现来进行所有操作，当然也可以借助某些if子句来进行。

user : {
    userId: 1,
    name: xxx,
    books: null or whatever
}