HTML集成particles.js遇TypeError错误：无法读取null属性求助

错误根源 #

这个报错的核心是：particlesJS初始化时，它试图获取的目标DOM元素不存在（返回了null），因此无法调用getElementsByClassName方法。大概率是元素选择器错误、容器缺失或脚本加载顺序问题导致的。

排查与解决步骤 #

• 检查目标DOM容器是否存在且选择器正确
  particles.js默认会查找**ID为particles-js**的元素（注意是ID而非类名，很多人在这里踩坑）。确保你的HTML中存在对应容器：

  <div id="particles-js"></div>
  

  如果你自定义了容器ID或选择器，要保证app.js里的调用参数完全匹配，比如容器ID是my-particles，就要写成particlesJS('my-particles', { /* 配置项 */ })。

• 确认脚本加载顺序
  必须先加载particles.js（或particles.min.js），再加载你的app.js——因为app.js要调用的particlesJS函数，是在particles的核心文件中定义的。正确的加载顺序示例：

  <script src="particles.min.js"></script>
  <script src="app.js"></script>
  

• 验证DOM加载时机
  即使脚本放在body末尾，也可能存在DOM未完全渲染的极端情况，用DOMContentLoaded事件包裹初始化代码更稳妥：

  document.addEventListener('DOMContentLoaded', function() {
    particlesJS('particles-js', {
      // 你的粒子配置项
      particles: {
        number: { value: 100 },
        size: { value: 2 }
      }
    });
  });
  

• 检查资源是否加载成功
  打开浏览器开发者工具的「网络」标签，刷新页面，确认particles.min.js和app.js的HTTP状态码为200（无404错误），确保文件确实在同一目录下。

完整可运行示例 #

HTML文件 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Particles.js Demo</title>
  <style>
    #particles-js {
      width: 100vw;
      height: 100vh;
      background-color: #232741;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
    }
  </style>
</head>
<body>
  <div id="particles-js"></div>

  <script src="particles.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

app.js文件 #

particlesJS('particles-js', {
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: "#ffffff"
    },
    opacity: {
      value: 0.5
    },
    size: {
      value: 3,
      random: true
    },
    line_linked: {
      enable: true,
      distance: 150,
      color: "#ffffff",
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 6
    }
  },
  interactivity: {
    events: {
      onhover: {
        enable: true,
        mode: "repulse"
      }
    }
  }
});

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