HTML元素能否用‘+’作为ID？为何querySelector调用失败？

核心原因是两种方法的匹配规则完全不同：

• getElementById()的逻辑非常直接：它会直接遍历DOM，精确匹配元素的id属性值，不管这个值包含什么特殊字符，只要字符串完全一致就能找到目标元素，所以getElementById("+")能正常工作。
• querySelector()严格遵循CSS选择器语法，而CSS选择器对#后的ID名称有明确语法限制：
  • ID不能以+这类特殊符号开头
  • +本身在CSS选择器里是特殊符号（比如表示相邻兄弟选择器），直接写#+会被浏览器解析成错误的选择器结构，自然触发报错。

解决办法 #

1. 转义特殊字符：如果坚持使用当前ID，需要把+转义为CSS认可的格式。由于JS字符串里反斜杠需要二次转义，所以要写成\\+，示例：

   document.querySelector("#\\+")
   // jQuery写法
   $("#\\+")
   

2. 更换规范的ID：更推荐的方式是给这类带特殊符号的按钮换个符合CSS规则的ID，比如btn-plus，这样不管用哪种选择器方法都不会有问题，代码可读性也更强。

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