JS中获取DOM元素后调用addEventListener报TypeError错误求助

1. HTML标签嵌套错误 #

你的HTML代码存在无效嵌套问题：<span id="music-player">some text</span> 已经提前闭合，导致后面的<i>标签和末尾的</span>不属于该span元素，浏览器解析时会自动修正DOM结构，最终music-player元素没有子元素，甚至可能导致元素查找异常。

修正后的HTML代码：

<div class="theme-switch-wrapper">
  <span id="music-player">
    some text
    <i id="playBtn" class="fa-solid fa-circle-play"></i>
    <i id="pauseBtn" class="fa-regular fa-circle-pause"></i>
  </span>
</div>

2. JS执行时机问题 #

如果你的JS代码在HTML结构渲染完成前执行（比如放在<head>标签内），document.getElementById('music-player')会返回null，此时调用addEventListener就会触发报错。

解决方式有两种：

• 将JS代码放在</body>标签之前，确保DOM渲染完成后再执行JS：

const playToggle = document.getElementById('music-player');
function changeIcon(){
    console.log(playToggle.children);
}

playToggle.addEventListener('click', changeIcon);

• 用DOMContentLoaded事件包裹代码，等待DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  const playToggle = document.getElementById('music-player');
  function changeIcon(){
      console.log(playToggle.children);
  }
  playToggle.addEventListener('click', changeIcon);
});

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