querySelector仅首页生效 多页站点浅色模式子页元素切换失效

问题现象 #

• 开发个人作品集浅色模式功能时，querySelector相关逻辑仅在about页（index.html首页）正常运行，其余子页面样式切换异常。
• 已确认：所有静态资源路径配置正确，无加载错误；手动通过浏览器开发者工具为元素添加light-mode类名时，浅色样式可正常渲染，CSS规则本身无问题；导航、页脚等全页面通用模块切换正常，仅blog、projects、contact三个子页面的专属内容模块无法切换。

项目结构 #

index.html
->pages
   -blog.html
   -contact.html
   -projects.html
->scripts
   -main.js
   -blog.js
   -contact.js
   -light.js
   -projects.js
->css
   -全部样式表文件

现有配置 #

首页（index.html） #

• 底部脚本引入：

<script src="scripts/main.js"></script>
    <script src="scripts/light.js"></script>
</body>

• 头部样式引入：

<link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link rel="stylesheet" type="text/css" href="css/about.css" />
    <link rel="stylesheet" type="text/css" href="css/responsive.css" />
    <link rel="stylesheet" type="text/css" href="css/light.css" />

子页面（blog/contact/projects.html） #

• 底部脚本引入：

<script src="../scripts/blog.js"></script>
    <script src="../scripts/main.js"></script>
    <script src="../scripts/light.js"></script>
</body>

• 头部样式引入：

<link rel="stylesheet" type="text/css" href="../css/styles.css" />
    <link rel="stylesheet" type="text/css" href="../css/projects.css" />
    <link rel="stylesheet" type="text/css" href="../css/responsive.css" />
    <link rel="stylesheet" type="text/css" href="../css/light.css" />

现有切换逻辑 #

light.js中实现的浅色模式切换函数：

function lightMode() {
  // 全页面通用元素
  document.body.classList.toggle('light-mode')
  document.querySelector('.fa-sun').classList.toggle('fa-moon')
  document.querySelectorAll('.line').forEach(line => line.classList.toggle('light-mode'))
  document
    .querySelectorAll('.custom-shape-divider-bottom-1619735001 .shape-fill')
    .forEach(shape => shape.classList.toggle('light-mode'))

  // About首页专属元素
  document.querySelectorAll('.about-p').forEach(p => p.classList.toggle('light-mode'))
  document.querySelectorAll('.p-icon').forEach(icon => icon.classList.toggle('light-mode'))
  document.querySelectorAll('.bullet').forEach(bullet => bullet.classList.toggle('light-mode'))
  document.querySelectorAll('.tech-used-link').forEach(link => link.classList.toggle('light-mode'))
  document.querySelectorAll('.tech-used-list').forEach(list => list.classList.toggle('light-mode'))
  document.querySelector('.paragraph .about-header').classList.toggle('light-mode')
  document.querySelector('.paragraph .working-on-header').classList.toggle('light-mode')
  document.querySelector('.hire-me .tooltip').classList.toggle('light-mode')

  // Blog页专属元素
  document.querySelectorAll('.devArticle').forEach(blog => blog.classList.toggle('light-mode'))

  // Projects页专属元素
  document.querySelectorAll('.project-tile').forEach(tile => tile.classList.toggle('light-mode'))
  document.querySelectorAll('.project-image').forEach(image => image.classList.toggle('light-mode'))

  // Contact页专属元素
  document.querySelectorAll('.contact-label').forEach(label => label.classList.toggle('light-mode'))
  document.querySelectorAll('.contact-input').forEach(input => input.classList.toggle('light-mode'))
  document.querySelector('.contact-textarea').classList.toggle('light-mode')
  document.querySelector('.form-submit').classList.toggle('light-mode')
}

切换按钮代码 #

导航栏内的模式切换按钮：

<li><button class="mode-toggle">
 <a class="sun" aria-label="Dark/Light Mode Button" onclick="lightMode()">
  <i alt="sun icon" class="fas fa-sun fa-2x"></i></a>
</button></li>

根因定位 #

函数执行中途抛错中断是核心原因：
代码中使用querySelector获取单个元素时，未做存在性校验。对于子页面来说，首页专属元素（如.hire-me .tooltip、.paragraph .about-header等）不在当前DOM树中，querySelector会返回null，此时直接调用null.classList.toggle()会抛出Cannot read properties of null (reading 'classList')类型错误，直接终止整个函数的执行，排在报错语句之后的子页面专属元素切换逻辑根本没有运行。
querySelectorAll不存在这个问题：即使没有匹配元素，它也会返回空NodeList，遍历空列表不会触发报错，所以所有用querySelectorAll编写的逻辑、以及排在报错行之前的逻辑都能正常运行，和观测到的现象完全吻合。

修复方案 #

给所有单元素查询逻辑增加存在性判断，仅当元素存在时才执行类名切换，修改后代码如下：

function lightMode() {
  // 全页面通用元素
  document.body.classList.toggle('light-mode')
  const sunIcon = document.querySelector('.fa-sun')
  if (sunIcon) sunIcon.classList.toggle('fa-moon')
  document.querySelectorAll('.line').forEach(line => line.classList.toggle('light-mode'))
  document
    .querySelectorAll('.custom-shape-divider-bottom-1619735001 .shape-fill')
    .forEach(shape => shape.classList.toggle('light-mode'))

  // About首页专属元素
  document.querySelectorAll('.about-p').forEach(p => p.classList.toggle('light-mode'))
  document.querySelectorAll('.p-icon').forEach(icon => icon.classList.toggle('light-mode'))
  document.querySelectorAll('.bullet').forEach(bullet => bullet.classList.toggle('light-mode'))
  document.querySelectorAll('.tech-used-link').forEach(link => link.classList.toggle('light-mode'))
  document.querySelectorAll('.tech-used-list').forEach(list => list.classList.toggle('light-mode'))
  const aboutHeader = document.querySelector('.paragraph .about-header')
  if (aboutHeader) aboutHeader.classList.toggle('light-mode')
  const workingHeader = document.querySelector('.paragraph .working-on-header')
  if (workingHeader) workingHeader.classList.toggle('light-mode')
  const hireTooltip = document.querySelector('.hire-me .tooltip')
  if (hireTooltip) hireTooltip.classList.toggle('light-mode')

  // Blog页专属元素
  document.querySelectorAll('.devArticle').forEach(blog => blog.classList.toggle('light-mode'))

  // Projects页专属元素
  document.querySelectorAll('.project-tile').forEach(tile => tile.classList.toggle('light-mode'))
  document.querySelectorAll('.project-image').forEach(image => image.classList.toggle('light-mode'))

  // Contact页专属元素
  document.querySelectorAll('.contact-label').forEach(label => label.classList.toggle('light-mode'))
  document.querySelectorAll('.contact-input').forEach(input => input.classList.toggle('light-mode'))
  const contactTextarea = document.querySelector('.contact-textarea')
  if (contactTextarea) contactTextarea.classList.toggle('light-mode')
  const submitBtn = document.querySelector('.form-submit')
  if (submitBtn) submitBtn.classList.toggle('light-mode')
}

修改前打开子页面按F12调出开发者控制台，点击切换按钮即可看到对应的报错信息，修改后报错消失，所有页面的切换逻辑均可正常运行。

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