JS中$可用但querySelector报Cannot add class to undefined错

• 首先纠正一个常见认知错误：原生JS默认根本没有把$作为document.querySelector的简写。你之前的$写法能正常运行，只有两种可能：要么页面引入了jQuery/Zepto这类类库，在全局挂载了$方法；要么项目公共脚本里自定义了全局$工具函数，和浏览器原生API没有任何关系。
• 你改完代码报错的核心问题根本不是元素没获取到，是方法用错了：你只替换了选择元素的代码，后面加类名的逻辑还在用jQuery专属的addClass()方法。原生DOM节点上不存在addClass这个实例方法，哪怕你真的通过querySelector拿到了目标元素，调用不存在的方法也会抛错。你看到的cannot add class to undefined报错，本质是JS执行时发现oldContainer.addClass的值是undefined，把undefined当函数调用触发的类型错误，不是oldContainer元素本身丢失。
• 你后续加load事件监听依旧不生效也很好理解：回调里你又换回了$选择器，如果代码评审后你已经移除了jQuery依赖、或者删掉了全局自定义的$方法，那$本身就是undefined，执行$()自然会报错，和页面加载时序没有关系。

正确的原生JS实现代码如下：

const oldContainer = document.querySelector('div.choose-location-options');
// 原生添加类名使用classList.add方法，增加判空逻辑避免元素不存在时抛错
if (oldContainer) {
  oldContainer.classList.add('hidden');
}

如果团队允许自定义简写，不要直接挂载全局$避免和其他依赖冲突，可以在当前作用域内定义简写方法：

const $ = selector => document.querySelector(selector);

注意自定义简写后所有DOM操作都要使用原生API，不要混用jQuery的实例方法。

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