Codepen正常代码复制到网站后出现Cannot read property 'children' of null错误

这种情况我碰到过好多次啦，本质问题很明确：你的代码执行的时候，items这个变量根本没找到对应的DOM元素，所以才会报null的错误。具体原因和解决办法分这几种：

1. JS代码执行时机不对（最常见原因） #

Codepen默认会帮你处理JS的执行时机——它通常会把你的JS代码放在DOMContentLoaded事件触发后执行，或者直接把JS插入到页面末尾，这时候页面上的所有DOM元素都已经渲染完成了。

但你自己的网站可能是把JS代码放在了<head>标签里，或者页面还没加载完就提前执行了，这时候浏览器还没渲染出items对应的元素，自然就返回null了。

解决办法： #

• 方法一：把JS代码移到页面末尾
  把你的JS代码放到</body>标签的前面，这样等所有DOM元素都加载完毕后，再执行JS代码：

  <body>
    <!-- 你的所有HTML内容 -->
    <script>
      // 这里放你的JS代码，包括var items = ... 和 var count = items.children.length;
    </script>
  </body>
  

• 方法二：用DOM加载事件包裹代码
  把你的JS代码放在DOMContentLoaded事件监听里，确保DOM完全加载后再执行：

  document.addEventListener('DOMContentLoaded', function() {
    // 你的所有JS代码都放在这里面
    var items = document.getElementById('你的元素ID'); // 假设你是通过ID获取的items
    var count = items.children.length;
    // 其他代码...
  });
  

2. DOM选择器不匹配或者元素缺失 #

检查一下你自己网站里的HTML结构：

• 确认items对应的元素（比如你用document.getElementById('xxx')或者document.querySelector('.xxx')获取的元素）在你的网站里确实存在，有没有复制Codepen的HTML时漏了这个元素？
• 确认选择器的拼写完全正确，比如ID有没有写错大小写，类名有没有多打或少打字符？

3. 其他可能的情况 #

如果上面两种情况都排除了，还可以检查：

• 有没有其他JS代码修改或删除了items对应的元素？
• 你的网站有没有使用框架（比如Vue、React），这些框架的DOM渲染机制和普通静态页面不同，可能需要调整代码的执行时机（比如在组件的mounted钩子中执行）。

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