details元素不存储数据，仅通过open属性和toggle事件控制显隐；内部子元素的值随时可读写，与展开状态无关，需用queryselector或直接访问input.value获取真实业务数据。
details 元素本身不存储数据，靠 open 属性和事件监听获取状态
html5 的
不是数据容器，它只控制显隐逻辑。所谓“取折叠内容数据”，实际是读取其子元素（比如
或内部文本/表单字段）的值，再结合当前是否展开来判断用户意图。
-
open属性是布尔值，直接读取可获当前状态：el.hasAttribute('open')或el.open（注意：后者在部分旧版 safari 中不可靠） - 不能靠
innerHTML或textContent判断“内容是否被取到”——折叠不影响 dom 存在，内容始终可访问 - 真正需要监听的是
toggle事件，它是唯一可靠捕获用户手动展开/收起动作的时机
监听 toggle 事件才能准确响应用户操作
很多开发者误用 click 或 change，但只有 toggle 是专为
设计的原生事件，且兼容性已覆盖 chrome 12+、firefox 49+、Safari 15.4+、edge 79+。
用户信息
姓名：
从
内部取真实业务数据，不是取“折叠态”
常见误区是以为“折叠时数据就不可用”。实际上，只要 DOM 渲染完成，
内部所有子元素（包括 、、）的值随时可读写，与 open 状态无关。
立即学习“前端免费学习笔记（深入）”；
- 要取表单值：直接访问
input.value、textarea.value，无需等待展开 - 要取结构化内容：用
querySelector定位内部节点，例如details.querySelector('input[name="email"]')?.value - 若需“仅在展开时校验”，应把校验逻辑放在
toggle回调里，而非依赖 DOM 是否可见
兼容性兜底：IE 不支持
，必须降级处理
IE 完全不识别
，会将其渲染为普通