如何使用JavaScript检查页面DOM元素是否存在 解决JS事件绑定报错

报错原因 #

document.querySelector查找元素时，没有匹配到对应节点会直接返回null。此时对null执行事件绑定、属性读写、第三方组件初始化，就会触发Cannot read properties of null类运行时错误，错误截图如下：

原始代码的核心问题是所有DOM操作、Swiper初始化都未做元素存在性校验，只要页面缺少任意一个对应节点（比如某页面没放导航、没加密码输入框、没引入轮播模块），JS就会直接报错中断后续执行。

解决方案 #

1. 全兼容基础写法 #

获取元素后先做布尔校验，确认元素存在再执行后续逻辑，修正后代码：

const open_menu = document.querySelector("#open-menu");
const close_menu = document.querySelector("#close-menu");
const nav_box = document.querySelector(".nav-box");
const eye_slash = document.querySelector(".fa-eye-slash");

// 菜单交互逻辑
if (open_menu && close_menu && nav_box) {
  open_menu.addEventListener("click",function (){nav_box.classList.remove("off")});
  close_menu.addEventListener("click",function (){nav_box.classList.add("off")});
}

// 密码显隐逻辑
const passwordInput = document.querySelector("#password");
if (eye_slash && passwordInput) {
  eye_slash.addEventListener("click",function (){
    passwordInput.type = "password";
  });
}

// 轮播初始化
const swiperContainer = document.querySelector('.swiper');
if (swiperContainer) {
  const swiper = new Swiper('.swiper', {
    direction: 'horizontal',
    loop: true,
    autoplay: {
      delay: 4000,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
}

2. 现代浏览器简洁写法 #

用ES2020标准的可选链操作符?.简化判空，当操作符左侧为null/undefined时会直接短路返回，不执行后续逻辑，也不会抛错：

// 菜单逻辑
document.querySelector("#open-menu")?.addEventListener("click", () => {
  document.querySelector(".nav-box")?.classList.remove("off");
});
document.querySelector("#close-menu")?.addEventListener("click", () => {
  document.querySelector(".nav-box")?.classList.add("off");
});

// 密码显隐逻辑
document.querySelector(".fa-eye-slash")?.addEventListener("click", () => {
  const pwd = document.querySelector("#password");
  if (pwd) pwd.type = "password";
});

// 轮播初始化
if (document.querySelector('.swiper')) {
  const swiper = new Swiper('.swiper', {
    direction: 'horizontal',
    loop: true,
    autoplay: { delay: 4000 },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
}

实操注意点 #

• querySelectorAll返回的是NodeList集合，无匹配元素时会返回空集合（length为0），判断这类结果要写if (res.length)，直接写if (res)会因为空集合布尔值为true导致判断失效
• 复用度高的DOM操作可以封装成通用工具函数，减少重复判空代码
• 所有依赖DOM节点的第三方组件初始化，必须放在容器存在性判断内部执行，否则页面未加载对应模块时会直接阻塞后续所有JS逻辑运行

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