获取文档的所有元素，但ID为“main-nav”的元素除外

Question

我想从侧面制作汉堡包菜单，打开时背景应该模糊，应该禁用悬停效果。如何让身体中的所有元素都使用id main-nav。我需要使用javascript来获取它，而不需要像jquery那样的库。 这是我认为它应该是但它不起作用：

document.querySelector('*:not(#main-nav)')

提前致谢

Answer 1

要选择多个元素，请使用querySelectorAll，而不是querySelector：

var items = document.querySelectorAll('*:not(#main-nav)')

但你不太可能真的需要所有这些元素。您可以使用某个类或其他属性来优化您的选择并避开*。

也许您只想选择容器。

我通常的解决方案是在要模糊的元素上显示一个div（可能是整个窗口），并使用backdrop-filter CSS过滤器和后备，只为不支持它的浏览器选择背景。

Answer 2

由于您选择的是多个节点，因此应使用querySelectorAll代替querySelector：

document.querySelectorAll('*:not(#main-nav)');