DOM查询结果为null时不能直接用?.链式调用，必须先赋值给const/let变量再使用?.；?.仅安全访问已声明变量的属性，不解决查询失败源头问题，需配合??提供默认值。
DOM查询结果为null时直接用?.会报错
直接对 document.querySelector 的返回值链式调用 ?. 是行不通的——因为如果选择器没匹配到元素，document.querySelector 返回 null，而 null?.className 会触发 TypeError: Cannot read properties of null。这不是可选链的适用场景，?. 只对 undefined 或 null **左侧已存在但值为 null/undefined 的对象**生效，但它**不处理 ReferenceError 或 TypeError 的源头缺失**。
必须先确保变量已声明且有值，再用?.访问属性
可选链要求左侧操作数是一个“已定义的变量”，哪怕它的值是 null。所以你要把 DOM 查询结果先赋给一个 const 或 let 变量，再在这个变量上使用 ?.：
const el = document.querySelector('.my-button');
const cls = el?.className; // ✅ 安全：el 是 const 声明的，值可能是 null，?. 有效
const txt = el?.textContent?.trim?.(); // ✅ 支持多层：textContent 可能为 null，trim 可能不存在
-
el必须显式声明（const/let/var），否则document.querySelector(...)?.className会因?.左侧不是引用而语法报错 -
el?.textContent中，若el === null，整个表达式短路返回undefined，不会尝试读取textContent -
el?.textContent?.trim?.()中，任意一环为null或undefined（比如textContent是空字符串、trim未定义），都会返回undefined，不抛错
不要用?.替代存在性判断，尤其在需要区分null和undefined时
可选链统一返回 undefined，它抹去了 null 和 undefined 的语义差异。如果你需要明确知道是“元素不存在”还是“元素存在但属性为空”，就不能只依赖 ?.：
-
document.querySelector('#missing')?.dataset.id→undefined（元素不存在） -
document.querySelector('#exists')?.dataset.id→undefined（元素存在但data-id未设置） - 两者无法区分；此时应先检查元素是否存在：
if (el) { ... }，再访问其属性 - 对布尔类属性（如
el?.disabled），注意disabled是可写属性，但初始值是false，不是undefined；?. 在这里无实际保护作用
与 ?? 配合才能真正兜底默认值
?. 只解决“不崩”，不解决“没值怎么办”。要提供 fallback，必须接空值合并运算符 ??：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('input[name="email"]');
const value = el?.value ?? ''; // ✅ el 为 null → undefined → ?? 触发 → ''
const placeholder = el?.getAttribute('placeholder') ?? '请输入邮箱';
-
??只在左侧为null或undefined时生效，比||更精准（避免 '' 或 0 被误判为 falsy） - 不要写成
el?.value || 'default'：当value是空字符串时也会 fallback，通常不符合预期 - 链越长，?. 和 ?? 的组合越必要：
el?.dataset?.userId ?? 'anonymous'
const 接住查询结果，再用 ?. 访问深层属性，最后用 ?? 提供语义明确的默认值。漏掉任一环，都可能在边界条件下悄悄失效。 
