如何使用querySelector选取未设置id的HTML元素？

你之前的写法document.querySelectorAll('*:not([id=""])')之所以会选中所有元素，是因为[id=""]匹配的是带有id属性但值为空的元素，:not([id=""])就会包含两类元素：完全没有id属性的，以及有id且值非空的，自然会选中所有元素。

要精准选中未设置id属性的元素，用这个选择器就行：

document.querySelectorAll('*:not([id])');

逻辑说明 #

• [id] 匹配任何带有id属性的元素（不管值是什么）
• :not([id]) 反向匹配所有完全没有id属性的元素
• 前面的*表示匹配所有标签类型，确保覆盖页面上所有元素

如果你的需求还包含“有id属性但值为空”的元素，可合并两种情况：

// 选中无id属性 或 id为空的元素
document.querySelectorAll('*:not([id]), *[id=""]');

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