querySelectorAll返回NodeList，需用展开语法转为数组才能调用.at()；.at(-1)语义化取末元素，空数组返回undefined，现代浏览器支持但IE不兼容，链式调用需配合可选链防御。
querySelectorAll 返回的是 NodeList，不是 Array
直接对 querySelectorAll 的返回值调用 .at() 会报错：TypeError: NodeList.prototype.at is not a function。因为 NodeList 虽然类数组，但没继承 Array.prototype，原生不支持 .at() —— 即使在现代 Chrome/Firefox 中，NodeList 也只实现了 .forEach、.item() 等有限方法，.at() 不在其中。
所以必须先转成真数组。最轻量且推荐的方式是使用展开语法：
const buttons = [...document.querySelectorAll('button')];而不是 Array.from() 或 Array.prototype.slice.call() —— 前者多一次构造函数调用，后者已过时且语义不清。
用 at(-1) 替代 length - 1 安全取末尾元素
传统写法 buttons[buttons.length - 1] 在空数组时返回 undefined，但不会报错；而 .at(-1) 行为一致，且更语义化。关键优势在于它天然支持负索引，无需手动计算下标，代码可读性直线上升。
常见误用场景：
- 误以为
document.querySelectorAll('input').at(-1)能直接运行 —— 实际会报错，漏了转换步骤 - 用
.at(-1)后未检查返回值是否为null（注意：NodeList 转数组后元素仍是 DOM 节点，但若选择器无匹配项，数组为空，.at(-1)返回undefined，不是null）
稳妥写法示例：
const inputs = [...document.querySelectorAll('input')];<br>const lastInput = inputs.at(-1);<br>if (lastInput) {<br> lastInput.focus();<br>}性能和兼容性要心里有数
.at() 是 ES2022 新增方法，所有现代浏览器（Chrome 92+、Firefox 95+、Safari 15.4+）都支持，但 IE 完全不支持。如果项目还需兼容旧环境，不能只靠 polyfill Array.prototype.at —— 因为 NodeList 本身不挂载该方法，polyfill 只作用于 Array 构造函数，对展开后的数组有效，但无法让原始 NodeList 直接调用。
所以兼容方案只有两个实际选项：
- 坚持用展开 +
.at()，并确保构建工具（如 Babel）已配置@babel/preset-env自动注入Array.prototype.atpolyfill（仅对数组生效） - 退回到
nodes[nodes.length - 1]，或封装一个安全的last(nodes)工具函数
别试图给 NodeList.prototype 扩展 .at() —— 这属于危险的全局污染，尤其在第三方库共存时可能引发冲突。
链式调用时别忘了中间环节的类型
有人想写成这样：
[...document.querySelectorAll('div')].filter(el => el.classList.contains('active')).at(-1)这完全合法，而且很优雅。但要注意：每次调用 .filter()、.map() 等都会生成新数组，.at() 总是作用于最新那个数组实例。容易忽略的一点是，如果过滤后结果为空，.at(-1) 仍返回 undefined，不会抛错，但后续链式调用（比如再跟 .click()）就会爆 Cannot read property 'click' of undefined。
所以真实业务中，建议把末尾访问单独拎出来判断，或者用可选链：
const lastActive = [...document.querySelectorAll('div')]<br> .filter(el => el.classList.contains('active'))<br> .at(-1)?.click();可选链在这里不是炫技，而是防御性编程的自然延伸。
