1. 使用 setAttribute 设置元素属性
要点
setAttribute 提供了一种通用的写入属性的方式，适用于大多数属性与自定义属性，尤其在处理 data-、aria- 等前缀属性时具有天然优势。
需要注意的是，属性值总是字符串，因此在需要数值或布尔型时通常需要在写入后进行类型转换或额外处理。
代码示例
// 常规属性设置
const a = document.querySelector('#myLink');
a.setAttribute('href', 'https://example.com');// 自定义属性
a.setAttribute('data-id', '12345');
在以上示例中，data-id 会成为一个真实的 HTML 属性，适用于在未来通过脚本读取的场景。
对于布尔属性，使用 setAttribute 需要显式设置一个值来表示“存在”，例如 setAttribute('disabled', '')，以确保浏览器将属性视为启用状态。
要点扩展
当需要给元素添加命名空间相关的属性时，setAttribute 仍然可用，但若涉及命名空间差异，应结合 setAttributeNS 来处理特定命名空间的属性。
2. 直接对 DOM 属性进行赋值
要点
通过直接给 DOM 属性赋值，例如 element.id、element.className、element.value、element.checked，这是一种更贴近 DOM 内部的写法，能够让属性的值在浏览器的对象模型中立即生效。
这种方式对 标准属性（如 id、title、href、value、checked 等）具有直观语义，通常性能更好，且代码更简洁。
代码示例
const img = document.querySelector('#logo');
img.src = 'logo.png';
img.alt = '网站标志';const checkbox = document.querySelector('#agree');
checkbox.checked = true; // 布尔属性的典型用法
需要注意的是，并非所有属性都对应 DOM 属性，对于没有对应属性的情况，仍需回退到 setAttribute。
应用场景
直接对 DOM 属性赋值在实现快速交互、布尔属性控制、以及对标准属性进行简单赋值时非常合适，性能和可读性通常较好，但要避免混用导致前后属性不一致。
3. 使用数据属性和 dataset 接口
要点
HTML 的 data-* 属性是一种自定义数据存储机制，dataset 提供了一个映射，将 data-foo-bar 转换为 dataset.fooBar 属性，便于脚本访问。
通过 dataset 设置数据属性时，属性在 HTML 上也会写入 data- 前缀的属性，确保与标记中的数据保持一致。
代码示例
const btn = document.querySelector('#save');
btn.dataset.userId = 'u42'; // data-user-id="u42" 将被写入 DOM
对于同一个数据，dataset 赋值等价于 setAttribute('data-xxx', value)，但提供了更直观的 JavaScript 接口。
适用场景
当需要在 DOM 元素上携带额外的元数据来供脚本处理时，data-* 属性与 dataset 是最佳实践，特别是在组件化、事件传递、以及跨函数使用状态信息时。
4. 通过 style 对象设置内联样式
要点
通过 style 对象直接修改内联样式，是修改视觉呈现的高效方式，常见属性以 camelCase 形式访问，如 backgroundColor、fontSize。
如果要写出具备连字符的 CSS 属性名，可以使用 setProperty，例如 element.style.setProperty('font-size', '14px')，保证兼容性与语义清晰。
代码示例
const box = document.querySelector('.panel');
box.style.backgroundColor = '#f0f';
box.style.fontSize = '14px';
box.style.setProperty('border-radius', '6px');
通过 style 修改样式可以快速响应用户操作，但要注意过度依赖内联样式可能降低 CSS 的可维护性，需结合外部样式表进行权衡。
使用注意
属性名的映射规则：JavaScript 使用驼峰命名法，CSS 使用连字符命名法，混用时要分清楚，避免不经意造成样式覆盖冲突。
