关键在于来源、类型与同步机制：id、className（class）、title等存在双向映射；value、checked等仅attribute初始化property，后续状态由property反映；自定义属性须用dataset，样式事件等内容操作应优先用property。

区分Property和Attribute的关键，在于理解它们的来源、类型、同步机制与适用场景——不是所有HTML属性都自动映射为DOM对象属性，也不是所有DOM属性都有对应的HTML attribute。

哪些属性存在双向映射？哪些只单向存在？

浏览器对部分标准属性做了显式映射，比如 id、className（对应HTML中的 class）、title、style、src（<img>）、href（<a>）等。这些属性修改任一方，另一方通常会同步更新（但有例外，见下文）。
而以下情况则不映射：

• 自定义属性（如 data-* 以外的 my-id、abc="123"）——仅存在于 attributes 集合中，不会变成 element.myId
• value 属性在 <input> 中是典型陷阱：HTML attribute value="初始值" 仅影响初始渲染；后续用户输入或 JS 赋值改变的是 property input.value，attribute 不变
• checked、selected、disabled 等布尔属性：attribute 存在即为 true（无论值是什么），但 property 是布尔值；移除 attribute 不等于设 property 为 false（例如 checkbox.removeAttribute('checked') 不取消勾选，需 checkbox.checked = false）
• class 是 attribute，但 DOM property 是 className（历史兼容原因）；现代推荐用 element.classList 操作

data-* 属性该用哪个 API？

HTML5 规范明确要求 data-* 属性必须通过 dataset API 访问，这是唯一推荐方式：

• <div data-user-id="1001" data-page-name="home"></div>
• JS 中：el.dataset.userId === "1001"（自动驼峰转换）、el.dataset.pageName === "home"
• 设置：el.dataset.userId = "1002"，会自动同步到 attribute
• 避免用 getAttribute('data-user-id') 或直接操作 property —— 不规范且易出错

样式、事件、内容类操作应优先走 Property

涉及运行时状态或频繁更新的场景，直接访问 property 更高效、更准确：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

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

• 文本内容：el.textContent（安全）或 el.innerHTML（需防 XSS），而非 getAttribute('text')（不存在）
• 表单值：input.value、select.value、textarea.value —— 它们反映当前真实值，attribute 只记录初始值
• 内联样式：el.style.color = "red"，而不是 setAttribute('style', 'color:red')（后者会覆盖全部 style）
• 事件处理：el.onclick = handler 或 el.addEventListener()，attribute onclick 是字符串，已过时且不可靠

什么时候必须用 getAttribute / setAttribute？

仅当操作目标是HTML源码层面的原始声明时才用：

• 读取初始 HTML 中写的值（如判断某个按钮是否带 data-init="true" 启动标识）
• 设置非标准、非映射的 attribute（如 el.setAttribute('aria-label', '删除')）
• 需要触发 attributeChangedCallback 的 Custom Element 场景
• 某些 SSR 或服务端预渲染后需比对客户端初始状态的场景

注意：setAttribute('value', 'x') 对已渲染的 input 不会改变其显示值（只改 attribute），要改显示值必须赋值 input.value = 'x'。