会。setAttribute 会完全覆盖已存在的同名属性值，无论该属性原先是否存在或为何值，包括布尔属性和空字符串；对 value、checked 等特殊属性应优先使用 DOM property 赋值而非 setAttribute。
setAttribute 会覆盖已存在的属性值吗
会。只要调用 setAttribute，不管目标属性是否已存在，都会用新值完全替换旧值——包括布尔属性（如 disabled、checked）和空字符串值。比如元素已有 disabled=""，再执行 el.setAttribute('disabled', 'false')，结果是 DOM 上显示 disabled="false"，而非移除该属性。
常见误操作：
- 想“取消禁用”，却写
el.setAttribute('disabled', 'false')→ 实际仍被禁用（因为只要存在disabled属性，浏览器就视为 true） - 想设置
data-id但拼错为dataset.id→ 不报错但无效，应直接用setAttribute('data-id', '123')
哪些属性不能用 setAttribute 安全设置
部分 HTML 属性与 DOM 属性同名但行为不一致，直接用 setAttribute 可能导致意外：
-
value：对<input>元素，setAttribute('value', 'x')只修改初始值（defaultValue），不改变当前用户输入后的value属性；应改用el.value = 'x' -
checked/selected/multiple：同理，设为字符串'true'或'false'无意义；应使用el.checked = true -
style：可设，但会覆盖全部内联样式；推荐用el.style.color = 'red'或el.style.cssText += ';color:red'
setAttribute 和点号赋值（.xxx）的区别在哪
本质不同：setAttribute 操作的是 HTML 属性（attribute），即源码中写的那些键值对；点号赋值操作的是 DOM 属性（property），是 JavaScript 对象上的实时状态。
立即学习“前端免费学习笔记（深入）”；
典型差异场景：
-
el.className = 'new'等价于el.setAttribute('class', 'new')→ 都生效 -
el.innerHTML = '<span>ok</span>'是 property 写法，不对应任何 HTML attribute；没有setAttribute('innerHTML', ...)这种用法 -
el.hrefproperty 返回解析后的绝对 URL；getAttribute('href')返回原始相对路径字符串
动态设置自定义 data-* 属性的注意事项
用 setAttribute 设置 data- 属性最安全，但要注意命名转换规则：
- HTML 中写
data-user-id="100"，JS 中获取需用el.getAttribute('data-user-id')，不能写成el.dataset.userId（那是驼峰形式，对应data-user-id） - 如果用
el.dataset.userId = '100'，会自动转为data-user-id；但反过来，setAttribute('data-userId', '100')生成的是data-userid（全小写，无短横），无法通过dataset访问 - 避免在
data-名中使用大写字母或下划线，否则可能跨浏览器不一致
实际写的时候，别只盯 setAttribute 这一个方法；什么时候该用它，什么时候该切到 property 赋值，得看你在改“HTML文本”还是“DOM对象状态”。这个边界模糊的地方，恰恰是调试时最常卡住的位置。
