data属性存路径必须用字符串，浏览器不解析或转义；写入时需html实体转义、引号匹配或encodeuricomponent编码；读取应优先用getattribute()而非dataset；设置必须用setattribute()；相对路径需用new url()转绝对url。
data属性存路径必须用字符串，别指望自动转义或解析
HTML data-* 属性本质是纯字符串容器，存路径如 或 data-path="assets/images/logo.svg" 完全没问题，但浏览器不会做任何 URL 解析、相对路径补全或编码处理。你写什么，它就存什么——包括空格、中文、特殊符号（如 &、?、#），只要没破坏 HTML 结构，就都能原样保留。
常见错误现象：
- 写
<div data-url="https://example.com/path?x=1&y=2"> 却漏了 HTML 实体转义，导致 <code>&被解析成&，后续 JS 读出来变成https://example.com/path?x=1&y=2（URL 无效） - 路径含单引号或双引号，又没包裹在对应引号中，直接导致 HTML 解析失败（DevTools 里元素可能被截断）
- 服务端渲染或手写 HTML 时，对路径中的
&必须写成& - 路径含双引号（如
"）就用单引号包裹整个属性：data-path='/path/to"file.jpg' - 路径含单引号（如
'）就用双引号包裹：data-path="/path/to'file.jpg" - 不确定时，统一用
encodeURIComponent()编码路径段（非整 URL），再塞进属性值（JS 动态设置时适用）
正确做法：
读取路径时优先用 getAttribute()，dataset.xxx 可能掉链子
路径名常含连字符、数字开头或大小写混用（比如 data-api-endpoint、data-v2-path、data-UID），这些都会让 dataset 驼峰转换失效或静默返回 undefined。而 getAttribute() 直接读原始字符串，不转换、不丢值、不报错，更稳。
示例对比：
<button data-api-endpoint="https://api.example.com/v2/users"></button>
✅ 正确读法：el.getAttribute('data-api-endpoint') → 返回 "https://api.example.com/v2/users"
❌ 错误读法：el.dataset.apiEndpoint → 在部分旧版 Safari 或命名不规范时可能为 undefined（因 api-endpoint → apiEndpoint 的转换并非 100% 可靠）
特别注意：data-1st-load-path 这类数字开头的，el.dataset["1stLoadPath"] 能读到，但点号语法 el.dataset.1stLoadPath 直接语法错误；getAttribute() 无此限制。
动态设置路径必须用 setAttribute()，dataset赋值不更新DOM
很多人写 el.dataset.src = "/new/path" 看似生效，但 el.getAttribute('data-src') 仍返回旧值——因为 dataset 是只读代理，赋值只是改了内存映射，没真正写入 DOM 属性节点。刷新页面、重新序列化（如 el.outerHTML）后，值就丢了。
真正可靠的写法只有：
-
el.setAttribute('data-src', '/new/path')—— 设置或覆盖 -
el.removeAttribute('data-src')—— 删除属性（不是设为空字符串） - 批量设置多个路径：
Object.entries({ src: '/a', fallback: '/b', cdn: 'https://cdn.example.com' }).forEach(([k, v]) => el.setAttribute(`data-${k}`, v))
如果你用 jQuery：.attr('data-src', '/new/path') 才等价于 setAttribute；.data('src', ...) 是另一套缓存机制，和 DOM 无关，别混用。
路径值不能直接当 URL 使用，记得校验和拼接
data-* 存的只是字符串，不是可执行的 URL。常见疏漏：
- 存的是相对路径（如
data-path="images/icon.png"），JS 里直接fetch(el.dataset.path)会 404，得先转成绝对 URL：new URL(el.dataset.path, location.href) - 存的是带查询参数的路径（如
data-api="/users?limit=10"），后续追加参数时别直接字符串拼接，避免重复?或&，建议用URLSearchParams处理 - 路径含用户输入内容（如文件名来自表单），要防 XSS：虽然
data-*不参与渲染，但若你后续把它拼进innerHTML或location.href，就得先encodeURIComponent()或白名单过滤
最易被忽略的一点：路径字符串末尾有没有斜杠、开头有没有 /，直接影响相对解析结果。不要依赖“看起来一样”，用 new URL() 构造后再取 .href 最保险。
