理解 querySelector 在多页面上下文的局限性
在构建具有多种主题（例如亮模式和暗模式）的网站时，常见的一种做法是通过 javascript 动态添加或移除 css 类来改变页面元素的样式。然而，当网站包含多个页面且每个页面都有其独特的元素时，如果主题切换逻辑尝试在所有页面上同时操作所有可能存在的元素，就会遇到问题。
考虑以下场景：一个网站包含 index.html (关于页面)、blog.html、projects.html 和 contact.html。每个页面都有一些独有的元素，例如 blog.html 有 .devArticle，projects.html 有 .project-tile 等。当用户在 index.html 页面触发主题切换时，如果 JavaScript 函数尝试查找并修改 .devArticle 元素，它将无法成功，因为这些元素并不存在于当前的 index.html 页面 DOM 中。
原始的 lightMode 函数可能如下所示：
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'));
// 关于页面特有元素
document.querySelectorAll('.about-p').forEach(p => p.classList.toggle('light-mode'));
document.querySelectorAll('.p-icon').forEach(icon => icon.classList.toggle('light-mode'));
// ... 其他关于页面元素
// 博客页面特有元素
document.querySelectorAll('.devArticle').forEach(blog => blog.classList.toggle('light-mode'));
// 项目页面特有元素
document.querySelectorAll('.project-tile').forEach(tile => tile.classList.toggle('light-mode'));
document.querySelectorAll('.project-image').forEach(image => image.classList.toggle('light-mode'));
// 联系页面特有元素
document.querySelectorAll('.contact-label').forEach(label => label.classList.toggle('light-mode'));
document.querySelectorAll('.contact-input').forEach(input => input.classList.toggle('light-mode'));
// ... 其他联系页面元素
}当 lightMode() 函数在 index.html（关于页面）被调用时，document.querySelectorAll('.devArticle')、document.querySelectorAll('.project-tile') 等针对其他页面元素的查询会返回空的 NodeList，因此这些部分的样式无法被切换。这导致了主题切换功能仅在当前页面（如 index.html）的部分元素上生效，而对其他页面独有元素则无效。
优化方案：利用 CSS 级联规则实现主题切换
解决上述问题的关键在于改变思路：我们不需要在 JavaScript 中遍历所有可能受主题影响的元素。相反，我们只需在 JavaScript 中操作一个高层级的元素（通常是 <body> 或 <html>）的类名，然后让 CSS 负责根据这个全局类名来应用相应的样式。
立即学习“前端免费学习笔记（深入）”；
1. 简化 JavaScript 逻辑
主题切换的 JavaScript 函数将变得极其简洁，只负责切换 <body> 元素上的一个类（例如 light-mode）：
// light.js
function lightMode() {
document.body.classList.toggle('light-mode');
// 可选：如果需要切换图标，例如太阳/月亮图标
document.querySelector('.fa-sun').classList.toggle('fa-moon');
// 最佳实践：将主题偏好存储到 localStorage，以便下次访问时保留
if (document.body.classList.contains('light-mode')) {
localStorage.setItem('theme', 'light');
} else {
localStorage.setItem('theme', 'dark');
}
}
// 页面加载时检查并应用保存的主题
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') {
document.body.classList.add('light-mode');
// 如果图标也需要根据保存的主题初始化，则在此处处理
const sunIcon = document.querySelector('.fa-sun');
if (sunIcon && !sunIcon.classList.contains('fa-moon')) {
sunIcon.classList.add('fa-moon');
}
}
});在 HTML 中，主题切换按钮的事件处理可以直接调用这个简化后的函数：
<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>2. 利用 CSS 级联定义主题样式
所有与亮/暗模式相关的样式变化都通过 CSS 来实现。当 <body> 元素具有 light-mode 类时，相应的子元素将应用不同的样式。这样，无论当前页面加载了哪些元素，只要它们符合 CSS 选择器，就会自动应用正确的样式。
以下是一些示例 CSS 规则：
/* 默认（暗模式）样式 */
body {
background-color: #333;
color: #eee;
}
.line {
background-color: #666;
}
.devArticle {
background-color: #444;
color: #ccc;
}
.project-tile {
border: 1px solid #555;
}
/* 亮模式样式 */
body.light-mode {
background-color: #f0f0f0;
color: #333;
}
body.light-mode .line {
background-color: #ccc;
}
body.light-mode .devArticle {
background-color: #fff;
color: #222;
}
body.light-mode .project-tile {
border: 1px solid #ddd;
}
/* 针对其他元素的亮模式样式 */
body.light-mode .custom-shape-divider-bottom-1619735001 .shape-fill {
fill: #fff; /* 假设在亮模式下形状填充色变化 */
}
body.light-mode .about-p,
body.light-mode .p-icon,
body.light-mode .bullet,
body.light-mode .tech-used-link,
body.light-mode .tech-used-list,
body.light-mode .paragraph .about-header,
body.light-mode .paragraph .working-on-header,
body.light-mode .hire-me .tooltip {
color: #333; /* 亮模式下的文本颜色 */
/* 其他亮模式样式 */
}
body.light-mode .project-image {
filter: brightness(0.9); /* 亮模式下图片可能需要调整亮度 */
}
body.light-mode .contact-label,
body.light-mode .contact-input,
body.light-mode .contact-textarea,
body.light-mode .form-submit {
background-color: #fff;
color: #333;
border-color: #ccc;
}通过这种方式，lightMode() 函数只关心 <body> 元素的类名切换，而具体的样式应用则完全交由 CSS 处理。当 blog.html 加载时，如果 <body> 有 light-mode 类，那么 body.light-mode .devArticle 规则就会自动生效。其他页面同理。
优势与注意事项
- 代码简洁性与可维护性： JavaScript 代码变得非常精简，只负责核心的类名切换。所有主题相关的样式都集中在 CSS 中，便于管理和修改。
- 性能提升： 减少了 JavaScript 对 DOM 的频繁查询和操作，尤其是在页面元素较多时，可以减少性能开销。
- 可扩展性： 当新增页面或元素时，只需在 CSS 中添加相应的 body.light-mode .new-element 规则即可，无需修改 JavaScript 逻辑。
- 准确性： 确保了只有当前页面上存在的元素才会应用主题样式，避免了对不存在元素的无效操作。
- 用户体验： 结合 localStorage 可以实现主题偏好的持久化，用户下次访问时无需再次切换。
注意事项：
- CSS 选择器优先级： 确保 body.light-mode .element 这种选择器的优先级高于默认样式，以便正确覆盖。
- 初始加载： 在页面加载时，应根据 localStorage 中的主题设置，通过 JavaScript 立即为 <body> 添加或移除 light-mode 类，以避免页面闪烁（FOUC）。
- 全局样式与局部样式： 区分哪些样式是全局性的（如背景色、字体颜色），哪些是页面或组件特有的，并合理组织 CSS。
通过采纳这种基于 CSS 级联的主题切换策略，开发者可以构建出更健壮、更易于管理和扩展的多主题前端应用。
