details元素不存储数据，仅通过open属性和toggle事件控制显隐；内部子元素的值随时可读写，与展开状态无关，需用querySelector或直接访问input.value获取真实业务数据。
details 元素本身不存储数据，靠 open 属性和事件监听获取状态
HTML5 的 <details> 不是数据容器，它只控制显隐逻辑。所谓“取折叠内容数据”，实际是读取其子元素（比如 <summary> 或内部文本/表单字段）的值，再结合当前是否展开来判断用户意图。
-
open属性是布尔值，直接读取可获当前状态：el.hasAttribute('open')或el.open（注意：后者在部分旧版 Safari 中不可靠） - 不能靠
innerHTML或textContent判断“内容是否被取到”——折叠不影响 DOM 存在，内容始终可访问 - 真正需要监听的是
toggle事件，它是唯一可靠捕获用户手动展开/收起动作的时机
监听 toggle 事件才能准确响应用户操作
很多开发者误用 click 或 change，但只有 toggle 是专为 <details> 设计的原生事件，且兼容性已覆盖 Chrome 12+、Firefox 49+、Safari 15.4+、Edge 79+。
<details id="user-details">
<summary>用户信息</summary>
<p>姓名：<input type="text" id="name-field" value="张三"></p>
</details>
<script>
const details = document.getElementById('user-details');
details.addEventListener('toggle', () => {
console.log('当前展开状态：', details.open);
if (details.open) {
// 展开后可安全聚焦或读取内部字段
document.getElementById('name-field').focus();
}
});
</script>
从 <details> 内部取真实业务数据，不是取“折叠态”
常见误区是以为“折叠时数据就不可用”。实际上，只要 DOM 渲染完成，<details> 内部所有子元素（包括 <input>、<textarea>、<select>）的值随时可读写，与 open 状态无关。
- 要取表单值：直接访问
input.value、textarea.value，无需等待展开 - 要取结构化内容：用
querySelector定位内部节点，例如details.querySelector('input[name="email"]')?.value - 若需“仅在展开时校验”，应把校验逻辑放在
toggle回调里，而非依赖 DOM 是否可见
兼容性兜底：IE 不支持 <details>，必须降级处理
IE 完全不识别 <details>，会将其渲染为普通 <div>，且不触发 toggle 事件。若需支持 IE，不能只靠 CSS + JS 模拟，而应彻底替换为 <div class="accordion"> 结构，并用 class 控制显隐。
立即学习“前端免费学习笔记（深入）”；
- 检测方式：
typeof HTMLDetailsElement === 'undefined'（IE 返回undefined） - 不要试图用
details.setAttribute('open', true)在 IE 中“强制展开”——无效，且破坏语义 - 服务端渲染时，若需 SEO 或基础可用性，建议默认让关键内容始终可见，或用
<noscript>提供降级 HTML
open 属性能“触发数据加载”，其实它只是个开关；真正要取的，永远是里面那些 <input>、<span>、<div> 的值——而且它们一直都在。 
