JavaScript中如何获取所有ID不以foo开头的DOM元素？

嘿，我懂你的需求——就是要实现和document.querySelectorAll('[id^=foo]')完全相反的效果，找出所有ID不以foo开头的元素。你之前用的[id!=foo]之所以没达到预期，是因为这个选择器的作用是“ID不等于foo的元素”，而不是“ID不以foo开头的元素”——比如ID为foobar的元素依然会被选中，这显然不是你想要的结果。

下面给你两种靠谱的实现方式：

方法1：使用CSS伪类:not()结合属性选择器 #

这是最简洁的写法，直接用CSS选择器完成筛选：

// 方式A：选中所有元素中，ID不以foo开头的（包括没有ID的元素）
const elements = document.querySelectorAll(':not([id^=foo])');

// 方式B：只选中**带有ID属性**且ID不以foo开头的元素（更精准）
const elements = document.querySelectorAll('[id]:not([id^=foo])');

解释一下：

• [id^=foo] 匹配所有ID以foo开头的元素
• :not(...) 是取反伪类，用来排除符合括号内条件的元素
• [id] 先筛选出带有ID属性的元素，再排除以foo开头的，避免选中没有ID的元素

方法2：用JavaScript手动过滤（兼容性更好） #

如果需要兼容一些老旧浏览器（比如不支持复杂:not()选择器的环境），可以先获取所有带ID的元素，再用filter方法过滤：

// 先获取所有带ID的元素，转成数组后过滤
const elements = Array.from(document.querySelectorAll('[id]')).filter(el => {
  return !el.id.startsWith('foo');
});

这里el.id.startsWith('foo')判断ID是否以foo开头，前面加!取反就得到了我们需要的元素。

内容的提问来源于stack exchange，提问作者Drago