JavaScript中DOM属性需区分attribute（HTML字符串）与property（JS实时值），获取时优先用dataset、专用property，设置时避免innerHTML拼接以防XSS。
JavaScript 中 DOM 属性的安全获取与设置，关键在于分清“属性节点（Attribute）”和“属性（Property）”两类对象，并按需选用对应 API。用错方法不仅取不到真实值，还可能引发状态不一致、类型错误或 XSS 风险。
区分 attribute 和 property 才不会出错
HTML 标签里写的叫 attribute（如 id="box"、data-count="5"、disabled），是字符串形式的原始声明；而 JS 中 DOM 元素对象上挂的叫 property（如 el.id、el.dataset.count、el.checked），是实时可读写的 JS 值。
-
getAttribute('value')返回 HTML 初始值（<input value="abc">→"abc"） -
el.value返回用户当前输入的值（即使初始没写 value，也能拿到实时内容） -
getAttribute('disabled')只要存在该属性就返回""（空字符串），不管是否显式赋值 -
el.disabled返回布尔值true/false，反映当前是否禁用
获取属性：优先选 dataset、专用 property，再用 getAttribute
对 data-* 自定义属性，直接用 dataset 最安全简洁：
-
el.dataset.userId→ 对应data-user-id="100"（自动转驼峰） - 值始终是字符串，需要数字时手动
parseInt(el.dataset.count) - 不存在的 data 属性返回
undefined，不是null，适合做条件判断
对标准属性（id、className、src、href 等），直接访问 property 更高效且语义清晰：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
el.id、el.className、el.src、el.href - 注意：
class要写成className，for要写成htmlFor
只有在必须读取原始 HTML 字符串（比如调试、比对模板、处理遗留属性）时，才用 getAttribute()：
- 它返回
null（非undefined）表示属性不存在，注意判空逻辑 - 不要用它读
value、checked、selected等表单实时状态
设置属性：避免 innerHTML 注入，按类型选方法
设置属性前先确认目标用途：
- 改样式？用
el.style.xxx = "..."或el.classList.add() - 改类名？用
el.className = "new"或更推荐el.classList.toggle() - 设自定义数据？用
el.dataset.key = "val"（自动同步到data-key） - 设布尔属性（
disabled、hidden）？直接赋布尔值：el.hidden = true
慎用 setAttribute()：
- 它把所有值转为字符串，
el.setAttribute('disabled', true)实际写入disabled="" - 对
style、class等，不如专用接口直观、高效 - 绝对不要用它拼接用户输入来设置
innerHTML，极易触发 XSS
安全底线：不拼接不可信内容进 HTML
任何涉及动态插入 HTML 的操作（如 innerHTML = "..."+userInput）都必须过滤或转义：
- 纯文本内容优先用
textContent，它不解析标签，天然防 XSS - 必须插 HTML 时，使用
DOMPurify.sanitize()等库清洗 - 设置
href、src时校验协议，禁止javascript:或data:伪协议
