Document.querySelector无法选中嵌套a标签 报错link is null如何解决

核心原因 #

绝大多数querySelector返回null的问题都是脚本执行时机早于DOM渲染完成导致的：如果你的JS代码放在了HTML结构的前面（比如放在head标签内，或是放在body标签中对应DOM结构的上方），浏览器加载到JS代码时，目标a标签还没被渲染到DOM树上，自然找不到元素，返回null。
其他可能原因：

• 选择器拼写错误：检查你写的类名container/box/right/content有没有拼写错误、大小写是否和HTML里的类名完全一致，DOM结构层级有没有额外的嵌套标签和你写的选择器层级不匹配
• 目标DOM是动态生成的：如果这个a标签不是页面初始就写在HTML中，是后续JS动态插入的，在插入逻辑执行前调用选择方法也会找不到元素

解决方案 #

方案1：调整JS代码放置位置 #

把JS代码放到</body>闭合标签的前面，保证浏览器先完成所有DOM渲染再执行JS逻辑：

<body>
  <!-- 所有HTML结构放在前面 -->
  <div class="container">
    <div class="box">
        <div class="left"></div>
        <div class="right">
           <div class="content">
            <h1>Blue Blood Fashion</h1>
            <hr>
            <p>is a high end prêt line of garments for an individual who is conscientious of his/her social position and status.</p>
            <a href="#">Enter Shop</a>
            </div>
        </div>
    </div>
  </div>
  <!-- JS放在body最后面 -->
  <script>
    const bike = document.querySelector('.container .box .left');
    const link = document.querySelector('.container .box .right .content a');

    link.addEventListener('mouseenter', () => {
        bike.classList.add('active');
    })
  </script>
</body>

方案2：监听DOM加载完成事件再执行逻辑 #

如果无法调整JS的位置，可以把代码包裹在DOMContentLoaded事件回调里，等DOM初始加载完成后再执行选择逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const bike = document.querySelector('.container .box .left');
  const link = document.querySelector('.container .box .right .content a');

  link.addEventListener('mouseenter', () => {
      bike.classList.add('active');
  })
})

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