直接修改DOM元素属性（如img.src、a.href）最可靠，浏览器自动同步渲染；布尔属性须传true/false而非字符串；动态元素需确保存在后再绑定事件或用事件委托；避免setAttribute修改标准属性。
点击按钮时修改某个元素的 src 或 href
直接改 DOM 元素对象的属性字段最可靠，比如 img.src、a.href、input.value。浏览器会自动同步到渲染层，且对布尔属性（如 disabled、checked）支持 true/false 赋值，不用传字符串。
常见错误：用 setAttribute('src', ...) 改图片地址后不生效 —— 因为有些浏览器（尤其旧版 Safari）对动态设置 src 有缓存或解析延迟；而直接赋值 img.src = '...' 会强制触发加载逻辑。
- 获取目标元素必须在按钮点击前完成，否则
document.getElementById('target')返回null - 如果目标元素是动态插入的，确保绑定事件时它已存在于 DOM 中，或改用事件委托
-
src和href值必须是合法 URL，相对路径以当前页面为基准，避免写成./image.jpg却在子目录页运行导致 404
用 setAttribute 改自定义属性或非标准属性
setAttribute 是唯一能安全写入 data- 属性、aria- 属性或拼写不规范属性的方式。例如 element.setAttribute('data-status', 'loaded')，后续可用 element.dataset.status 读取。
注意：不要用 setAttribute 改 class、style、id 这类有对应 JS 属性的字段——虽然能写入 HTML，但不会触发样式重绘或 ID 引用更新，容易引发隐性 bug。
立即学习“前端免费学习笔记（深入）”；
-
setAttribute('class', 'new-cls')会覆盖整个 class 字符串，丢失原有 class；应改用element.className = 'old new-cls'或更推荐的element.classList.add('new-cls') -
setAttribute('style', 'color:red')会抹掉所有内联样式；应改用element.style.color = 'red' - 自定义属性名含连字符时，
dataset会自动转为驼峰，如data-user-id→element.dataset.userId
按钮绑定事件必须用 addEventListener，别用 onclick 属性
一个按钮可能被多个逻辑模块监听（比如统计埋点 + 表单校验 + UI 反馈），只有 addEventListener 支持叠加注册。用 button.onclick = fn 或行内 onclick="..." 都会覆盖之前绑定的处理函数。
另一个关键点：事件回调里修改 DOM 必须基于「找到的那个节点」，而不是靠全局变量或重复查询。否则在复杂交互中容易操作错对象。
- 避免在事件回调里再写
document.getElementById('target')—— 查询开销大，且若节点被移除会返回null - 推荐把目标节点提前查好，闭包保存：
const target = document.getElementById('target'); button.addEventListener('click', () => target.src = 'new.jpg'); - 如果按钮和目标节点关系固定（如按钮在目标元素内部），可用
event.currentTarget或event.target.closest()定位，减少硬编码 ID
修改 disabled、checked 等布尔属性要传布尔值
HTML 中 disabled 是布尔属性，写成 <button disabled> 就生效，没值也有效。但 JS 中必须用 true/false 赋值，传字符串 'true' 或 'false' 会被当作真值，导致永远 disabled。
这个坑特别容易出现在从 API 拿到字符串型开关状态时，比如后端返回 { "is_disabled": "true" }，直接 btn.disabled = res.is_disabled 就错了。
- 正确写法：
btn.disabled = res.is_disabled === 'true'或btn.disabled = Boolean(res.is_disabled) -
checked、selected、hidden同理，一律用布尔值 - 读取时也注意：
element.disabled返回布尔值，element.getAttribute('disabled')返回字符串""或null，二者语义不同
input.value 不会触发 input 事件，表单验证逻辑可能收不到通知；改了 img.src 但没监听 load 或 error，就无法知道图片是否真的加载成功。这些不是“能不能改”的问题，而是“改了之后系统认不认”的问题。 
