textcontent 是提取按钮纯文本的首选方式，它忽略 html 标签、兼容性好（ie9+）、语义准确，可直接获取用户可见字符，但需注意空白符保留、定位精准及执行时机。
用 textContent 获取按钮内纯文本最可靠
直接读取 textContent 是提取按钮显示文本的首选方式，它忽略 HTML 标签，只返回用户实际看到的字符内容。比如 <button>点击</button> 返回 "点击"，<button>删除 <span class="icon">✕</span></button> 也只返回 "删除 ✕"（注意空格和符号仍保留）。
常见错误是误用 innerHTML，它会把内部标签也当字符串返回，导致结果含杂乱 HTML；而 innerText 受 CSS 样式（如 display: none）影响，可能漏掉本该显示的文本。
- 优先用
textContent，兼容性好（IE9+），语义准确 - 若按钮含 SVG 或复杂嵌套，
textContent依然有效，无需遍历子节点 - 注意：
textContent会保留换行、缩进等空白符，如需清理可链式调用.trim()
用 querySelector 定位特定按钮再取文本
实际页面常有多个按钮，得先精准选中目标元素。靠 id 最稳：document.querySelector('#submit-btn').textContent；没 id 时可用 class、data-* 属性或结构关系，比如 document.querySelector('form .btn-primary').textContent。
容易踩的坑是用错选择器导致取到错误按钮，或选择器无匹配结果，此时 .textContent 会报 Cannot read property 'textContent' of null 错误。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 加空值判断：
const btn = document.querySelector('#save'); if (btn) console.log(btn.textContent) - 避免用
getElementsByTagName('button')[0]这类模糊索引，页面结构一变就失效 -
data-testid或data-cy等测试属性是定位的理想选择，不影响样式且语义清晰
动态按钮文本变化后如何实时获取
按钮文本可能由 JS 修改（如加载中变为“提交成功”），这时不能只在页面加载时取一次。需要监听状态变化，或在触发逻辑后立即读取。
没必要用 MutationObserver 监听所有变动——开销大且易误触。更实际的做法是在你控制文本变更的代码之后，同步读取：
- 例如：执行
btn.textContent = '正在保存...';后，紧接着console.log(btn.textContent) - 如果文本由第三方库（如 Vue/React）驱动，应通过其响应式机制读取源数据，而非 DOM
- 若必须监听 DOM 变化（如集成遗留脚本），用
MutationObserver时限定attributes: false, childList: true, subtree: false，只观察直接子节点文本变化
服务端渲染或 SSR 页面中提取按钮文本要小心
在 Next.js、Nuxt 等框架中，若在 useEffect 或 mounted 钩子外直接操作 DOM，可能因节点尚未挂载而取不到元素。尤其 getStaticProps 生成的页面，JS 还没执行时 DOM 已输出，但此时浏览器中 JS 无法运行。
关键点在于：文本提取一定是客户端行为，服务端拿不到真实渲染后的按钮文本（除非用 Puppeteer 等工具做完整渲染）。
- 确保代码运行在浏览器环境，可用
typeof window !== 'undefined'判断 - SSR 页面中，不要在
getServerSideProps里尝试document.querySelector - 若需服务端预置文本，应从数据源（如 props、store）直接读，而不是反向从 DOM 提取
textContent 足够覆盖九成需求，但真正麻烦的是定位不稳定和时机不对——DOM 没 ready 就查、按钮被条件渲染但没兜底、文本藏在伪元素里（这时 textContent 无效，得另想办法）。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
