JavaScript遍历隐藏非指定div时读取null的id属性报错排查

Uncaught TypeError: Cannot read properties of null (reading 'id') 触发逻辑非常明确：你通过id查询DOM时拿到了null值，后续遍历读取null.id直接抛错。常见触发场景只有三类：

• id数组里存在拼写错误，和实际DOM的id大小写、字符不匹配，getElementById匹配不到元素时默认返回null
• JS加载时机早于DOM渲染，比如脚本放在<head>标签内且没有加DOM加载完成监听，执行元素查询时目标节点还没被浏览器解析
• id数组里混入了空字符串、undefined这类无效值，查询时直接返回null

完全抛弃硬编码全量id、逐元素绑定事件的冗余写法，用属性关联的方式实现通用逻辑，后续新增/修改分类不需要调整JS代码：

1. 先给DOM节点加语义化标识，解耦JS和硬编码id

<!-- 主分类点击项，加统一类名和data-category标识分类值 -->
<div class="main-cat" data-cat="backpacking">背包旅行</div>
<div class="main-cat" data-cat="camping">露营</div>

<!-- 子分类项，加统一类名和data-belong标识所属主分类 -->
<div class="sub-cat" data-belong="backpacking" id="bP-longDistanceHiking">长距离徒步</div>
<div class="sub-cat" data-belong="backpacking" id="bP-thruHiking">穿越徒步</div>
<div class="sub-cat" data-belong="camping" id="camp-tent">帐篷露营</div>
<div class="sub-cat" data-belong="camping" id="camp-car">车载露营</div>

2. 写通用交互逻辑，不需要维护任何id列表

// 等DOM全量解析完成再执行逻辑，避免元素查询返回null
document.addEventListener('DOMContentLoaded', () => {
  const allMainCats = document.querySelectorAll('.main-cat')
  const allSubCats = document.querySelectorAll('.sub-cat')

  // 通用隐藏全部子分类方法
  const hideAllSubs = () => allSubCats.forEach(sub => sub.hidden = true)

  // 给所有主分类绑定点击事件
  allMainCats.forEach(cat => {
    cat.addEventListener('click', () => {
      hideAllSubs()
      // 筛选当前主分类对应的子分类显示
      const targetCat = cat.dataset.cat
      document.querySelectorAll(`.sub-cat[data-belong="${targetCat}"]`)
        .forEach(sub => sub.hidden = false)
    })
  })

  // 初始化默认隐藏所有子分类，可根据需求改成默认展示第一个分类的子项
  hideAllSubs()
})

如果暂时不想重构DOM结构，只需要在原有逻辑里加两步即可解决报错：

• 把脚本执行逻辑放到DOM加载完成的回调里，或者把script标签移到</body>标签前
• 获取DOM元素后过滤掉null值，避免遍历读到空值

const catIds = [/* 你维护的全部分类id数组 */]
// 查询后过滤null值
const divs = catIds.map(id => document.getElementById(id)).filter(Boolean)

const hideAllDivsExcept = (targetIdList) => {
  divs.forEach(div => {
    div.hidden = !targetIdList.includes(div.id)
  })
}

// 调用示例：点击backpacking时只显示对应两个子分类
// hideAllDivsExcept(['bP-longDistanceHiking', 'bP-thruHiking'])

对比最初逐元素获取、逐元素写隐藏逻辑的写法，基于类选择器+自定义属性的方案代码量减少70%以上，后续迭代不需要手动维护冗长的id列表，从根源上避免id拼写错误导致的报错。

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