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

【问题标题】：Get all elements containing a class with querySelector使用 querySelector 获取包含类的所有元素
【发布时间】：2021-10-04 00:58:33
【问题描述】：

为了改变我正在使用querySelector()的类中的一些样式：

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

这适用于一个元素，但如果有更多包含此类的元素并且我想将所有元素的显示更改为无，则此命令只会删除它的第一次出现，而下一个保持不变。

我尝试使用querySelectorAll()：

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

但是这个返回错误信息：

html2canvas: TypeError: Cannot set property 'display' of undefined

关于如何获取包含特定类的所有元素并对它们执行操作有什么想法吗？

【问题讨论】：

【解决方案1】：

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

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

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

请注意：一些旧版本的 IE (querySelectorAll()。在这种情况下使用

Array.from(document.querySelectorAll('.fa.fa-car'))

【讨论】：

【解决方案2】：

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

另请注意，您的选择器似乎无效。鉴于 FontAwesome 类规则，我认为您需要同时选择两个类。试试这个：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你得到错误是因为 querySelectorAll 返回一个数组。迭代它然后使用 style.display

【讨论】：

【解决方案5】：

您可以通过迭代此类的出现来完成所有操作，当然还可以借助一些 if 子句。

$('.fa.fa-car').each(function(){
     $(this).css('color','white');
})

【讨论】：