开发Excel克隆应用时querySelectorAll返回空NodeList问题

问题原因 #

选择器语法使用错误：

• CSS选择器中，两个类名中间加空格属于后代选择器，.input-cell .selected-cell的作用是匹配「祖先元素带有input-cell类、自身带有selected-cell类的后代元素」。你的场景是同一个单元格元素同时拥有input-cell和selected-cell两个类，不符合该选择器的匹配规则，因此返回空的NodeList。
• 额外排查点：如果选择器修改正确后仍然返回空，需要确认执行querySelectorAll时，目标单元格元素已经被挂载到页面DOM树中，未插入DOM的动态生成元素无法通过document的查询方法匹配到。

解决方法 #

如果要匹配同时拥有多个类的同一个元素，将多个类选择器直接连写、中间不加空格即可：

cell.setAttribute('class','input-cell selected-cell');
// 匹配同时拥有input-cell和selected-cell类的元素
var input_cell = document.querySelectorAll('.input-cell.selected-cell');
console.log(input_cell);

如果只需要匹配所有带input-cell类的元素，直接使用.input-cell作为选择器即可。

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