获取文档中除了id为'main-nav'的元素之外的所有元素。

Question

我希望能够制作一个侧边汉堡菜单，当打开时背景应该模糊，悬停效果应该被禁用。我如何在不包括id为main-nav的元素的情况下获取body中的所有元素？我需要使用JavaScript而不是像jQuery这样的库。

这是我认为应该是这样的，但它并没有起作用：

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

Thanks in advance

- Gillis Werrebrouck

Answer 1

由于您选择了多个节点，您应该使用querySelectorAll而不是querySelector：

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

- Jonathan Argentiero

---

你没有注意到在你之前有一个相同的答案吗？ - Denys Séguret

同时发布 :) - Jonathan Argentiero

这个方案更好，但是有一个小问题。我忘了说在id为main-nav的元素中，ul、li和a标签也应该被排除在外。这可行吗？ - Gillis Werrebrouck

Answer 2

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

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

但你可能并不需要所有这些元素。很可能有一个类或另一个属性可以用来精细选择并避免使用*通配符。

也许你只想选择容器。

我通常的解决方案是在要模糊的元素上显示一个div（可能是整个窗口），并使用带有回退选项的backdrop-filterCSS滤镜，对于不支持它的浏览器，将背景设置为半透明。

- Denys Séguret