HTML data属性怎么在树形菜单中传递节点信息-html教程-PHP中文网

data-id 和 data-expandable 是树节点必需属性：data-id 唯一标识节点且必须为字符串，data-expandable="true" 显式标记可展开节点；二者均需在插入 dom 前设置，js 通过 dataset.id 和 event.target.closest('[data-expandable]') 安全读取，结构化数据须 json.parse + try/catch，状态变更应操作 hidden 或 class 而非 data-* 属性。

html data属性怎么在树形菜单中传递节点信息

data-id 和 data-expandable 是树节点的必需属性

每个 li 节点必须带 data-id，用于唯一标识；可展开节点还需显式设置 data-expandable="true"（叶子节点不设）。浏览器不会校验这些属性是否存在，但 JS 逻辑依赖它们做精准定位和状态判断。

常见错误是把 ID 存在 id 属性里——id 仅用于 CSS 或 getElementById，而 dataset.id 读不到；或者漏掉 data-expandable，导致点击后无法识别是否该触发展开逻辑。

data-id 值必须为字符串，数字需转成字符串：li.setAttribute('data-id', String(node.id))
不要用 data-node-id 或 dataNodeId —— 浏览器只解析全小写+连字符格式，其他命名直接忽略
动态创建节点时，data-expandable 必须在插入 DOM 前设置好，否则事件委托查不到

用 event.target.closest() 安全提取 data-* 值

树容器上绑定一次 click 事件，用 event.target.closest('[data-expandable]') 找到被点击的可展开节点，再取 btn.dataset.id。别直接监听每个 li，懒加载节点还没生成，监听会失效。

容易踩的坑是没加 event.stopPropagation()：点击内部复选框或按钮时，事件冒泡到父 li，误触发展开/折叠。

判断目标是否有效：const btn = e.target.closest('[data-expandable]'); if (!btn || btn.disabled) return;
读 data-id 用 btn.dataset.id，不是 btn.id 或 btn.getAttribute('id')
如果 ID 含数字开头（如 data-2024-id="123"），必须用 btn.dataset["2024Id"]，点号访问会报错

data-* 只传初始值，结构化数据要 JSON.parse + try/catch

树节点常需要附带额外元信息，比如 data-config='{"type":"folder","editable":true}'。但 dataset.config 拿到的是字符串，直接用会出错；且服务端模板若未转义引号，JSON 解析直接崩溃。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

别把对象直接赋给 dataset.config = { type: 'folder' } —— 这只是 JS 对象，不会写入 DOM，后续读不到。

写入时用 li.setAttribute('data-config', JSON.stringify(config))
读取时必须包 try { JSON.parse(el.dataset.config || '{}') } catch (e) { console.warn('invalid data-config', e) }
布尔值别信 if (el.dataset.active) —— 字符串 "false" 也是真值，应写 el.dataset.active === "true"