JavaScript调用getElementById打印元素控制台返回null的原因

• 最常见的诱因是 test 函数的执行时机早于 #cart1 元素被解析插入DOM树的时间。虽然你将script标签放在了p元素的后面，但如果存在以下情况仍会触发该问题：
  • 外部脚本home.js添加了async属性，脚本加载完成后立即执行，未等待DOM解析完成
  • 打包工具自动将script标签插入到了head区域或body元素的最开头，早于p元素的位置
  • test函数被绑定到了页面加载完成前触发的事件回调中
• ID值不匹配：getElementById是大小写敏感的，若JS中传入的ID和HTML元素的id属性存在大小写差异、前后多余空格，也会返回null
• 其他前置JS逻辑在test执行前就移除了#cart1元素

• 先核对ID拼写：确保document.getElementById('cart1')的参数和HTML中id="cart1"完全一致，无多余空格、大小写错误
• 强制等待DOM树完全构建完成后再执行test函数，可通过监听DOMContentLoaded事件实现：

// home.js中的代码调整为如下形式
function test(){
  let cart1 = document.getElementById('cart1');
  console.log(cart1);
}
// 等DOM完全解析完成后再调用test
document.addEventListener('DOMContentLoaded', test)

• 也可以保持script标签放在</body>闭合标签之前，移除script标签的async/defer属性，直接在script末尾调用test()，此时前面的DOM元素已完成解析，可正常获取

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