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 完全不识别

，会将其渲染为普通 ，且不触发 toggle 事件。若需支持 IE，不能只靠 CSS + JS 模拟，而应彻底替换为 结构，并用 class 控制显隐。

• 检测方式：typeof HTMLDetailsElement === 'undefined'（IE 返回 undefined）
• 不要试图用 details.setAttribute('open', true) 在 IE 中“强制展开”——无效，且破坏语义
• 服务端渲染时，若需 SEO 或基础可用性，建议默认让关键内容始终可见，或用 提供降级 HTML

细节决定能否真正拿到数据：很多人卡在以为 open 属性能“触发数据加载”，其实它只是个开关；真正要取的，永远是里面那些 、、 的值——而且它们一直都在。