本地HTML/JS项目报错排查：CORS与DOM元素问题咨询

一、Uncaught TypeError: 无法读取null的addEventListener属性 #

• 原因：JS代码在目标DOM元素加载完成前就执行了，导致document.getElementById或类似元素选择方法返回null，调用addEventListener时触发错误。
• 解决方法：
  1. 将<script>标签放在HTML的</body>标签之前，确保DOM元素全部加载完毕后再执行JS代码。
  2. 或者用DOMContentLoaded事件包裹代码，同时增加元素存在性判断，避免null报错：

     document.addEventListener('DOMContentLoaded', function() {
       // 替换成你实际要操作的元素选择器
       const targetElement = document.getElementById('your-element-id');
       if (targetElement) {
         targetElement.addEventListener('click', function() {
           // 你的业务逻辑代码
         });
       }
     });
     

二、CORS策略阻止file协议请求data.json #

• 原因：浏览器安全策略禁止在file://协议（直接打开本地HTML文件）下发起AJAX请求加载本地JSON，会触发跨域限制。
• 无需本地服务器的解决方案：
  把JSON数据直接嵌入到JS文件中，彻底避免AJAX请求：
  1. 创建一个data.js文件，将data.json里的所有内容复制进去，并用变量包裹：

     const icdDatabase = {
       // 粘贴data.json的全部内容
     };
     

  2. 在HTML中引入这个data.js：

     <script src="data.js"></script>
     

  3. 之后在业务JS代码中直接使用icdDatabase变量即可，不需要再发起JSON请求。

关于JSON文件路径的问题 #

• 使用"data.json"作为路径是正确的，前提是data.json和你的HTML文件处于同一文件夹下（遵循相对路径规则）。
• 绝对不能使用完整本地路径（比如C:\Users\Heather\...\data.json）：其他人解压你的项目后，本地路径结构和你完全不同，绝对路径在对方电脑上会直接失效，导致无法访问文件。

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