如何使用JavaScript模糊除一个元素之外的所有元素

Question

我正在尝试模糊除p#this标签之外的所有元素。记住，我想用javascript做到这一点。不是jQuery或CSS，因为我正在尝试学习普通的javascript。

在this link上，我找到了类似的答案。 @ prog1011给出了答案，我正在尝试实现，但没有用。

https://jsfiddle.net/Lgq4szte/1/

<h1>New Title</h1>
<h2>New Title 2</h2>
<h3>New Title 2</h3>
<p id="this">New paragraph</p>

JS

document.querySelector("body :not(#this)").style.filter = "blur(2px)";

如何模糊除p#this标签之外的所有元素？

Answer 1

结合使用.querySelectorAll和.forEach，因为.style仅可用于单个节点：

document.querySelectorAll("body :not(#this)")
  .forEach(element => element.style.filter = "blur(2px)");

<h1>New Title</h1>
<h2>New Title 2</h2>
<h3>New Title 2</h3>
<p id="this">This paragraph</p>
<p id="that">That paragraph</p>