queryselector和queryselectorall是最可靠通用的按属性查元素方式，原生支持现代浏览器（ie9+），语法对应css选择器；前者返回首个匹配元素或null，后者返回静态nodelist。
querySelector 和 querySelectorAll 是当前最可靠、最通用的按属性查找元素的方式，无需依赖外部库，原生支持所有现代浏览器（包括 IE9+），且语法直接对应 CSS 选择器逻辑。
用 querySelector 查找第一个匹配的带属性元素
当你只需要一个结果（比如表单里第一个 data-role="submit" 的按钮），querySelector 最合适。它返回单个 Element 或 null（没找到时不报错）。
常见写法：
-
document.querySelector('[data-id]')—— 找任意有data-id属性的元素 -
document.querySelector('input[name="email"]')—— 找name="email"的input -
document.querySelector('button[disabled]')—— 找带布尔属性disabled的按钮（不关心值） -
document.querySelector('a[href^="https://"]')—— 找href以https://开头的链接（支持属性值匹配操作符）
注意：querySelector 不会抛错，但返回 null 后如果直接调用 .textContent 会触发 Cannot read property 'textContent' of null。务必先判空或用可选链：?.textContent。
用 querySelectorAll 批量查所有带属性的元素
需要处理多个匹配项时（比如收集所有 data-track 元素用于埋点），用 querySelectorAll。它返回的是静态 NodeList，不是实时集合，这点比 getElementsByClassName 更安全。
典型陷阱：
- 返回值不能直接用
.forEach（老版本 IE 不支持），建议转成数组：Array.from(document.querySelectorAll('[data-action]')) -
document.querySelectorAll('div[data-id]')和document.querySelectorAll('[data-id]')效果不同：前者限定标签类型，后者不限——别漏掉前缀导致范围过大 - 属性值含特殊字符（如点、括号）必须加引号：
document.querySelectorAll('[data-uid="abc.def"]')，否则解析失败
为什么不用 getElementsByName 或 getElementsByClassName 查属性？
这两个 API 本质是“按固定属性名硬编码查找”，不支持任意属性条件：
-
getElementsByName只认name属性，且只在部分元素（form、img、iframe等）上有效，语义受限 -
getElementsByClassName实际查的是class属性值，且对多 class 值（如class="btn btn-primary"）只能模糊匹配单个词，无法精确控制“同时包含”或“完整匹配” - 二者都返回实时
HTMLCollection，DOM 变动会意外改变其长度，遍历时容易漏项或重复
真正需要按任意 HTML 属性筛选时，绕不开 CSS 选择器引擎——也就是 querySelector 系列。
遇到 <template></template> 里的属性怎么查？
直接在 <template></template> 元素上调用 querySelector 会返回 null，因为它的内容不在主 DOM 树中。必须通过 template.content 访问其内部的 DocumentFragment：
const template = document.querySelector('template#user-card');
const button = template.content.querySelector('button[data-action="edit"]');
// ✅ 正确：在 fragment 上查
// ❌ 错误：template.querySelector('button[data-action="edit"]') 返回 null
这个细节极容易被忽略，尤其在 Web Components 或动态模板渲染场景下——查不到不是语法错，而是查错了宿主上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
