JS实现轮播图报Uncaught TypeError: Cannot read property 'children' of null怎么解决

你遇到的报错本质是 document.querySelector('.slider-items') 没有匹配到对应DOM元素，返回了null，此时尝试访问null的children属性就触发了类型错误，常见触发原因和解决方案如下：

• DOM 加载顺序错误
  这是最常见的触发原因：如果你的JS代码写在HTML中.slider-items节点的前面（比如放在<head>标签内），代码执行时浏览器还没有完成对应DOM节点的解析，自然无法获取到元素。
  解决方案二选一：
  1. 将轮播图相关的所有JS代码移到HTML文件</body>闭合标签的前面，保证DOM解析完成后再执行JS
  2. 将所有JS逻辑包裹在DOM加载完成的事件回调中，示例代码如下：

  document.addEventListener('DOMContentLoaded', function() {
    // 此处粘贴你原有所有轮播图代码
  })
  

• 类名匹配错误
  检查HTML中轮播图外层容器的class属性值，确认是否确实为slider-items，注意类名大小写、多余空格、拼写错误都会导致选择器匹配失败。
• 动态渲染未就绪
  如果.slider-items容器不是静态写在HTML里，是由其他JS逻辑动态生成的，需要确保轮播图初始化代码在容器渲染完成后再执行，否则也会获取不到元素。

你也可以额外补充容错逻辑避免同类报错：获取元素后先判断是否存在，再执行后续操作，比如：

const sliderContainer = document.querySelector('.slider-items')
if(!sliderContainer) {
  console.error('未找到轮播图容器')
  return
}
const slides = sliderContainer.children
// 后续逻辑

你后续获取左右切换按钮的代码也可能存在同类问题，建议也加上对应的存在性判断。

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