GPS坐标网格开发：选中div类添加active类触发空值读取错误

问题描述 #

开发GPS坐标可视化项目，需构建360×180的网格，每个网格项对应一个GPS坐标并赋予专属类名用于后续操作。但执行document.querySelector('.la-5-lo-100').classList.add('active')时触发错误：TypeError: Cannot read properties of null (reading 'classList')，手动在CSS中指定类样式可以生效，但动态添加类的方式无法正常工作。

原因分析 #

错误核心是DOM执行顺序问题：

• 网格元素的创建逻辑被包裹在DOMContentLoaded事件回调中，这部分代码会等到页面DOM完全加载后才执行。
• 而添加active类的代码是直接在全局作用域执行的，此时网格元素还未被创建，querySelector找不到对应元素，返回null，自然无法读取classList属性。

解决方案 #

将操作动态创建元素的代码放到DOMContentLoaded回调内部，确保元素已经存在后再执行。

修改后的JavaScript代码示例 #

'use strict';

// 创建GPS坐标网格并赋予专属类名
document.addEventListener('DOMContentLoaded', function () {
  const container = document.querySelector('.grid-container');
  for (let lo = 1; lo <= 180; lo++) {
    for (let la = 1; la <= 360; la++) {
      const div = document.createElement('div');
      div.className = 'grid-item';
      container.appendChild(div);
      div.classList.add(`la-${la}-lo-${lo}`);
    }
  }

  // 网格创建完成后再执行元素操作
  document.querySelector('.la-5-lo-100').classList.add('active');

  // 生成随机GPS坐标的逻辑也移到此处
  const randomGpsCoordinates = function () {
    const gpsCoordinate = {
      latitude: Math.trunc(Math.random() * 360) + 1,
      longitude: Math.trunc(Math.random() * 180) + 1,
    };
    return gpsCoordinate;
  };

  const gpsCoordinates = [];
  for (let i = 0; i < 5; i++) {
    gpsCoordinates.push(randomGpsCoordinates());
  }

  // 遍历随机坐标，给对应网格项添加active类（增加存在性判断避免报错）
  gpsCoordinates.forEach(coord => {
    const element = document.querySelector(`.la-${coord.latitude}-lo-${coord.longitude}`);
    if (element) {
      element.classList.add('active');
    }
  });
});

额外优化建议 #

• 在通过类名选择元素时，增加存在性判断（如上述代码中的if (element)），避免因坐标超出范围或其他原因导致的元素不存在报错。
• 修正CSS中的注释错误：grid-template-columns: repeat(360, 1fr)对应的注释应为“Creates 360 columns”，grid-template-rows: repeat(180, 5px)对应的注释应为“Creates 180 rows of 5px each”，提升代码可维护性。

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