严格模式下javascript禁用html元素id自动挂载到window的隐式全局变量机制，必须使用document.getelementbyid等显式api查询dom，并校验存在性、确保执行时机正确。
在严格模式下，JavaScript 会禁用隐式创建的全局变量，包括通过 HTML 元素 id 自动挂载到 window 上的引用（如 <div id="header"></div> 会导致 window.header 存在）。这种机制虽方便，但极易引发命名冲突、调试困难和不可靠访问——尤其在严格模式中，这类访问会直接报错或返回 undefined，而非静默失败。
明确禁用隐式 ID 全局绑定
HTML 规范允许浏览器将具有 id 的元素自动作为同名属性暴露在 window 对象上，但这属于非标准行为，且严格模式下该行为被彻底屏蔽。你不能依赖 header 或 productPicture 这样的变量名直接访问 DOM 元素。
- 即使脚本未启用严格模式，也应主动避免使用该特性——它不可靠、不跨浏览器一致、且与模块化开发冲突
- 启用
"use strict"后，若代码中写了console.log(header)且未声明header，会抛出ReferenceError: header is not defined - 这不是 DOM 查询失败，而是变量根本不存在；它和
document.getElementById返回null是两类问题
统一使用显式 DOM 查询 API
所有 DOM 访问必须通过标准方法显式获取，不依赖任何隐式绑定。推荐优先级如下：
-
document.getElementById(id)：最轻量、专用于 ID 查找，返回Element或null -
document.querySelector('#' + id)：更灵活，支持复杂选择器，但性能略低于getElementById -
parent.querySelector(selector)：限定作用域，避免误查其他区域的同 ID 元素（尤其在动态渲染或多实例组件中）
添加存在性校验再操作
查询结果必须检查是否为真值，再进行属性读写或方法调用，防止 Cannot read property 'xxx' of null 错误：
- 错误写法：
header.style.display = 'none';（header可能未定义或为null） - 安全写法：
const el = document.getElementById('header'); if (el) el.style.display = 'none'; - 可封装成工具函数，例如：
function getEl(id) { return document.getElementById(id) || null; }，后续统一判空
结合生命周期确保 DOM 已就绪
即使写法正确，若脚本执行过早（如放在 中），getElementById 仍会返回 null。需配合时机控制：
- 将
<script></script>标签移至前，保证 HTML 解析完成 - 或监听
DOMContentLoaded事件：document.addEventListener('DOMContentLoaded', () => { /* 查询逻辑 */ }); - 在 Vue/React 等框架中，改用
ref或useRef等响应式引用机制，而非基于 ID 的手动查询
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
