弹窗中应优先用textContent而非innerText提取文本，因其不受CSS显隐样式影响；但必须确保DOM已挂载、内容已渲染完成，否则会取到空值或旧值。
直接读取弹窗 DOM 元素的 textContent 即可，但必须确保弹窗已挂载且内容已渲染完成——否则取到的是空字符串或旧值。
为什么 innerText 在弹窗里不可靠
innerText 依赖 CSS 渲染状态和可见性判断，而弹窗常通过 display: none、visibility: hidden 或 opacity: 0 控制显隐。一旦弹窗容器被设为不可见，innerText 可能返回空或截断内容，尤其在 Safari 和部分移动端 WebView 中表现不稳定。
相比之下，textContent 不受样式影响，只读取 DOM 树中的文本节点，更适合作为提取依据。
- 弹窗用
dialog标签时，即使未调用showModal()，只要元素在 DOM 中，textContent就能取到内容 - 自定义弹窗（如
div.modal）若尚未插入 document 或仍处于初始化阶段，querySelector可能返回null，需先确认节点存在 - 若弹窗内容由 JS 动态注入（如
innerHTML = data.content），必须等赋值完成后才读取textContent
dialog 弹窗中提取文本要避开 open 属性干扰
dialog 的 open 属性只是控制是否显示，并不影响 DOM 结构。无论是否调用 showModal() 或 show()，只要 dialog 元素已挂载，其子节点的文本就可通过 textContent 获取。
立即学习“前端免费学习笔记（深入）”；
常见错误是误以为“没打开就取不到”，其实：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
document.querySelector('dialog').textContent总能读到全部文本，包括隐藏时的内容 - 若弹窗内有
slot或动态组件（如 Vue/React 渲染的子树），需等框架完成挂载后再读取 - 不要依赖
dialog.open布尔值来判断是否可读——它只反映模态状态，不决定 DOM 是否就绪
从 HTML 字符串生成临时 DOM 提取弹窗文本
当弹窗内容来自后端返回的 HTML 字符串（比如 JSON 中的 popupHtml 字段），不能直接用正则去标签，而应走 DOM 解析路径：
✅ 正确做法：
const temp = document.createElement('div');
temp.innerHTML = '<div class="modal-content"><h3>提示</h3><p>操作成功！</p></div>';
const text = temp.textContent; // → "提示操作成功！"
⚠️ 注意点：
- 必须用
document.createElement('div')包裹，不能直接对字符串调textContent - 如果原始 HTML 含 script/style 标签，它们不会执行，但标签名仍会出现在
textContent中（如"<script>alert(1)</script>"），需额外过滤 - 想保留段落换行？后续加
.replace(/\s+/g, ' ').trim()或按需用innerText（仅限已挂载且可见的场景）
容易被忽略的时机问题：弹窗内容还没渲染完就取文本
最常踩的坑不是方法错，而是执行太早——比如在 showModal() 调用后立刻读取，或在 innerHTML 赋值后同步取值，此时浏览器可能尚未完成 DOM 更新。
稳妥做法：
- 对原生
dialog：监听aftertoggle事件再读取，确保状态切换完成 - 对自定义弹窗：用
requestAnimationFrame延迟一帧，或监听transitionend（若含淡入动画） - 对异步加载内容（如 fetch 后插入）：必须在
then或await后再读取，不能放在请求发起之后立即执行
真正难的从来不是“怎么取”，而是“什么时候取才准”——DOM 就绪、框架渲染、CSS 显隐状态，三者稍有错位，textContent 就可能为空或不全。
