使用js应用.not()过滤器

Question

我需要使用js应用not(.pseudo-element)过滤器，但到目前为止我还不确定如何从DOM中提取#app：

const app = document.getElementById('app')
    
app.style.filter = 'brightness(0.5)'

现在，我的目标是将这个brightness应用于所有的子类，只有一个例外，如何使用js来实现它。

Answer 1

您可以尝试使用:not()选择器，如下所示，它将返回app中的所有子元素，不包括具有.pseudo-element类的元素。

app.querySelectorAll('*:not([class="pseudo-element"])');

另一种同样的书写方式是：-

app.querySelectorAll('*:not(.pseudo-element)');

：not(选择器)选择器也接受逗号。

app.querySelectorAll('*:not(.pseudo-element,.pseudo-element-2)');

Answer 2

你可以用猎枪二号的答案或者类似的东西：

const elements = [...app.querySelectorAll('*:not(.pseudo-element)')];

elements.forEach((element) => {
  element.style.filter = 'brightness(0.5)';
});

在上面的示例中，我使用扩展语法([...app.querySelectorAll()])，因为我个人更喜欢使用对象而不是NodeList，但这是个人偏好。

另一种方法是使用.classList()方法：

const elements = [...app.querySelectorAll('*')];

elements.forEach((element) => {
  if (!element.classList.contains('pseudo-element')) {
    element.style.filter = 'brightness(0.5)';
  }
});

请记住，如果您真的不需要JS，那么最好的方法可能就是使用CSS做同样的事情。

* {
  filter: brightness(0.5);
}

.pseudo-element {
  filter: none;
}