textContent 最可靠，因 innerHTML 可能混入标签、innerText 受 CSS 隐藏影响而漏值；getAttribute('textContent') 无效（textContent 是 DOM 属性非 HTML 属性），innerHTML 还会包含子元素标签。
直接用 textContent 读取 label 元素内容最可靠，别用 innerHTML 或 innerText ——前者可能混入 HTML 标签，后者受 CSS 隐藏影响，会漏掉值。
为什么不能用 getAttribute('textContent') 或 innerHTML
textContent 是 DOM 属性，不是 HTML 属性，所以 getAttribute('textContent') 一定返回 null；innerHTML 会把 label 里嵌套的 span、em 等标签也拉进来，比如 用 innerHTML 得到的是 "用户名*"，而你要的只是 "用户名*" 这个纯文本结果。
正确做法是：先选中 label 元素，再访问它的 textContent 属性。
- 对原生
label[for]：用document.querySelector('label[for="username"]').textContent - 对 Element Plus 的
.el-form-item__label：用document.querySelector('.el-form-item__label').textContent - 对 Ant Design 的
.ant-form-item-label label：同理，textContent直接取
label 关联不到 input 时怎么安全 fallback
有些页面用 aria-labelledby、aria-label 或直接靠视觉布局隐式关联，label[for] 可能根本不存在。这时候硬查 for 属性会失败。
建议按优先级链式尝试：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 先查
label[for]+textContent - 没命中就查
[aria-label]属性值 - 再没就查父容器里最近的
.el-form-item__label或.ant-form-item-label label - 最后兜底：用
document.querySelector('input[name="username"]').closest('.el-form-item').querySelector('.el-form-item__label')?.textContent
注意：所有取值后建议用 .trim().replace(/[:\s]+$/, '') 去掉末尾冒号和空格，中文/英文冒号都覆盖。
批量提取时容易忽略的 DOM 更新时机
如果表单是 Vue/React 动态渲染的，脚本在 DOMContentLoaded 时执行，可能 DOM 还没挂载完，querySelector 返回 null。
解决办法不是加 setTimeout，而是：
- 用
MutationObserver监听目标区域（如#app）的子节点变化，等.el-form-item__label出现再执行提取 - 或直接在控制台里等页面稳定后再粘贴脚本（适合人工操作场景）
- 若用自动化脚本（如 Puppeteer），应配合
page.waitForSelector('.el-form-item__label')
另外，textContent 不会触发重排，性能无压力；但千万别在循环里反复调用 querySelectorAll 而不缓存结果——尤其面对 50+ 字段时，DOM 查询开销明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
