data-*属性必须全小写加连字符才有效，如data-row-index；驼峰（dataRowIndex）或下划线（data_row_index）写法会被浏览器忽略，dataset中不可见且返回undefined。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

data-*属性在

和/的data属性时为什么总拿到undefined

不是JS写错了，是HTML命名或读取方式不对。重点检查两处：

• HTML里是否用了大写字母、下划线或空格——比如data-userId、data-user_id、data-user id全部无效
• JS里是否误用了原名访问：el.dataset["data-order-id"]或el.dataset.user-id（后者语法报错），正确写法是el.dataset.orderId
• 如果元素是动态插入的（比如用innerHTML拼接），dataset不会自动同步新属性，得手动setAttribute或重新解析

验证是否生效：用el.hasAttribute('data-order-id') + el.getAttribute('data-order-id')双检，比只查dataset更可靠。

立即学习“前端免费学习笔记（深入）”；

表格行点击后存状态，该用dataset还是setAttribute

想标记某行“已选中”，后续逻辑要判断，又希望DevTools里一眼看到变化——dataset读取方便，但写入必须用setAttribute才能持久化。

• ✅ 正确写法：tr.setAttribute('data-selected', 'true')，之后tr.dataset.selected === 'true'
• ❌ 危险混用：tr.dataset.selected = 'true'再tr.setAttribute('data-selected', 'false')，此时tr.dataset.selected仍返回'true'（缓存未刷新）
• 删除用tr.removeAttribute('data-selected')，或delete tr.dataset.selected（后者更安全，兼容IE11+）
• 布尔值别依赖if (tr.dataset.selected)——"false"也是真值，应写tr.dataset.selected === 'true'

存JSON或数字到data属性里要注意什么

dataset所有值都是字符串，表格单元格里存价格、ID、配置对象时，类型容易翻车。

• 数字：td.dataset.price是"99.9"，参与计算前必须转：Number(td.dataset.price)或+td.dataset.price
• 布尔：data-is-active="false" → td.dataset.isActive === "false"，不能用Boolean()判断
• 对象/数组：先JSON.stringify({mode: 'dev'})存进data-config，读取时JSON.parse(td.dataset.config)；注意服务端输出前要做HTML实体编码（如"替代"）
• 别把整个订单列表塞进data-orders——超长字符串拖慢DOM解析，优先用JS变量或Map缓存

表格里每行都带data-属性时，频繁读写会触发重排，循环中建议先读到局部变量再批量处理。

里怎么写才有效 必须全小写加连字符，data-row-index可以，dataRowIndex或data_row_index直接被浏览器忽略——DOM里查不到，dataset.rowIndex也返回undefined。 常见错误现象：<tr data-id="42">写对了，但<td data-productId="abc">里的productId驼峰写法无效；浏览器解析时跳过该属性，后续JS读不到。 <table data-table-type="order"> → table.dataset.tableType 可读 <tr data-order-id="1001"> → tr.dataset.orderId <td data-2024-q3="true"> → 必须用td.dataset["2024Q3"]（点号语法不支持数字开头） 连续连字符如data-foo--bar会被转成fooBar，语义混乱，别这么写 读取

或