使用document.querySelector传入数字ID报错的原因咨询

核心原因：CSS选择器与ID属性的规则差异 #

• document.getElementById() 直接匹配元素的id属性原始字符串值，不管这个值是否符合CSS选择器的命名规范，只要字符串完全匹配就能找到元素。
• document.querySelector() 遵循CSS选择器语法规则，而CSS中规定：ID选择器的标识符（即#后面的部分）必须以字母（a-z/A-Z）、下划线(_)或短横线(-)开头，后面可以跟数字、字母、下划线、短横线或其他合法字符。你的ID63c347f214f8baf0457355d3以纯数字开头，直接用#${msg._id}作为选择器会违反CSS语法，因此抛出DOMException。

若坚持使用querySelector的解决办法 #

如果不想切换到getElementById，有两种可靠的方式：

1. 使用属性选择器替代ID选择器
   属性选择器直接匹配id属性的具体值，不受CSS标识符规则限制，写法如下：

   document.querySelector(`[id="${msg._id}"]`)
   

2. 对数字开头的ID进行CSS转义
   按照CSS转义规则，开头的数字需要转义为\3加对应数字，再跟一个空格（或省略空格但需确保后续字符不会被误解析）。注意在JS字符串中需要用双反斜杠转义反斜杠：

   // 示例：将开头的6转义为\36
   document.querySelector(`#\\36 3c347f214f8baf0457355d3`)
   

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