querySelectorAll() 并不在意你的 HTML 来源于单个文件还是多个文件——它只关注当前浏览器标签页中已经渲染完成的 DOM 树。只要元素已加载并存在于当前 DOM 中，它就能精准匹配。问题的核心在于脚本执行的时机以及 DOM 是否已准备就绪。
简单来说，querySelectorAll() 是一个纯客户端的 DOM 查询方法，它不关心你的 HTML 内容到底来自 register.html 还是 login.html，它只关注当前浏览器标签页中实际渲染完成的 DOM 结构。换句话说，它作用于“运行时的文档对象”，而不是“源文件”。
你遇到的场景其实很典型：login.html 中的 .eye 元素没有被选中，console.log(eye.length) 输出为 1，只匹配到了 register.html 中的元素。这个问题的根本原因并非 querySelectorAll() 本身存在限制，而是更常见的几个情况：
- ✅ script.js 虽然被两个 HTML 文件共用，但脚本可能在 login.html 的 DOM 尚未完全加载时就已经执行；
- ❌ login.html 中可能缺失了某些关键结构（例如未引入 Font Awesome CSS，或者 .eye 元素根本没有渲染出来），甚至存在 JS 执行错误，导致后续逻辑被中断；
- ⚠️ 更普遍的情况是：脚本被直接放置在 中，既没有使用 defer 属性，也没有借助 DOMContentLoaded 事件保护，结果在 内容尚未解析完成时就开始执行，此时 document.querySelectorAll('.eye') 返回的自然是一个空 NodeList。
✅ 正确写法：确保 DOM 就绪后再查询
或者在 script.js 开头加上这样一层保护：
document.addEventListener('DOMContentLoaded', () => {
const eye = document.querySelectorAll('.eye');
console.log('Found eyes:', eye.length); // 现在会正确输出 1（本页）或更多
const pass = document.querySelectorAll('.password');
eye.forEach((v, i) => {
v.addEventListener('click', () => {
v.classList.toggle('fa-eye-slash');
const input = pass[i];
const currentType = input.getAttribute('type');
input.setAttribute('type', currentType === 'password' ? 'text' : 'password');
});
});
});⚠️ 注意事项：
- 别指望跨页面共享状态：register.html 和 login.html 是两个完全独立的页面，彼此的 DOM 完全隔离。querySelectorAll() 在 login.html 中永远无法访问到 register.html 的元素，反之亦然。
- 先确认元素真的存在：可以在控制台中手动执行
document.querySelectorAll('.eye')，查看是否有匹配的节点。 - 避免重复绑定事件：如果页面采用动态内容加载（例如 SPA 场景），需留意不要重复添加事件监听器。不过这里属于静态页面，使用 DOMContentLoaded 已经足够安全。
- 兼容性方面：querySelectorAll() 支持所有现代浏览器（IE8+），无需额外引入 polyfill。
总而言之，querySelectorAll() 的作用域就是当前文档对象（document），与文件系统路径毫无关系。只要 HTML 正确加载，脚本在 DOM 就绪后执行，它就能稳定工作——无论你手中有 1 个 HTML 文件，还是 100 个。
