queryselector选中按钮最直接，需合并查询button、input[type="submit/button/reset"]；动态渲染需确保dom挂载后执行；过滤可点击按钮应优先检查disabled、display:none和aria-hidden；服务端需用cheerio等库；shadow dom中须显式访问shadowroot。
用 querySelector 选中按钮最直接
浏览器原生解析 HTML 时，querySelector 是读取按钮元素的首选方式。它支持 CSS 选择器语法，能精准定位 <button></button>、带 type="submit" 的 <input>，甚至自定义 role="button" 元素。
常见误操作是只写 document.querySelector('button')，结果漏掉表单提交按钮——它们通常是 <input type="submit">。实际应合并查询：
const buttons = document.querySelectorAll('button, input[type="submit"], input[type="button"], input[type="reset"]');
注意：如果页面动态渲染（如 React/Vue），需确保执行时机在 DOM 挂载后，否则返回空 NodeList。
处理 disabled 或隐藏按钮时别被视觉欺骗
DOM 中的 disabled 属性或 display: none 不影响元素存在性，querySelectorAll 仍会返回它们。但业务逻辑常需过滤掉不可交互的按钮。
判断依据优先级建议如下：
-
element.disabled === true（原生禁用） -
getComputedStyle(element).display === 'none'（CSS 隐藏） -
element.getAttribute('aria-hidden') === 'true'（无障碍隐藏）
例如过滤出可点击按钮：
const actionableButtons = Array.from(buttons).filter(btn =>
!btn.disabled &&
getComputedStyle(btn).display !== 'none' &&
btn.getAttribute('aria-hidden') !== 'true'
);
服务端 HTML 解析（如 Node.js）要用专用库
Node.js 没有 document 对象，不能直接用 querySelector。必须借助 HTML 解析库，比如 cheerio（轻量、jQuery 风格）或 jsdom（完整模拟浏览器环境）。
用 cheerio 读取按钮示例：
const cheerio = require('cheerio');<br>const $ = cheerio.load(htmlString);<br>const buttonEls = $('button, input[type="submit"], input[type="button"]');
注意：cheerio 默认不解析 disabled 状态的布尔属性（如 <button disabled></button>），需用 attr('disabled') !== undefined 判断，而非 prop('disabled')。
遇到 Shadow DOM 时 querySelector 失效
Web Components 或某些 UI 库（如 Ionic、Lit）把按钮放在 Shadow Root 里，document.querySelector 就查不到。必须显式访问 shadowRoot：
const host = document.querySelector('#my-component');<br>if (host.shadowRoot) {<br> const buttonInShadow = host.shadowRoot.querySelector('button');<br>}
更麻烦的是，若组件使用 mode: "closed"，shadowRoot 为 null，此时无法从外部读取——这是设计使然，不是解析失败。只能靠组件暴露的 API 或 part / exportparts 机制间接控制。
这类场景下，硬解析 HTML 字符串再正则匹配按钮标签是下策，容易错判嵌套结构和属性转义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
