javascript 动态更新 dom 属性应优先使用语义化、安全且可维护的方式：标准属性直接赋值（如 el.src），自定义属性用 dataset，css 类操作用 classlist，内联样式用 style，文本内容首选 textcontent。
JavaScript 动态更新 DOM 节点属性，核心在于用语义化、安全且可维护的方式操作元素的内在特征——包括标准属性（如 src、href）、自定义属性（data-*）、CSS 类、样式和文本内容。关键不是“改什么”，而是“怎么改才稳、才安全、才不影响已有交互”。
更新标准属性：用 setAttribute 或直接赋值
对 img.src、a.href、input.value 等有对应 JS 属性的元素，优先直接赋值；对通用或非标准属性（如 title、alt），推荐 setAttribute()：
-
el.src = "logo.png"比el.setAttribute("src", "logo.png")更简洁，且触发浏览器原生行为（如图片加载） -
el.setAttribute("disabled", "")或el.disabled = true都有效，但布尔属性建议用后者更直观 - 避免
el.outerHTML = ...或反复写el.innerHTML来改属性——会丢失事件监听器和表单状态
操作 data-* 自定义属性：优先用 dataset
HTML 中的 data-id="123"、data-status="pending" 等，在 JS 中通过 element.dataset 访问，自动转为驼峰命名：
-
el.dataset.id → "123"（读取） -
el.dataset.status = "success"（写入，等价于setAttribute("data-status", "success")） -
delete el.dataset.id可移除该属性，比removeAttribute("data-id")更语义化
控制 CSS 类：用 classList 而非 className
直接改 el.className = "btn btn-primary active" 易覆盖原有类名；classList 提供原子化操作：
-
el.classList.add("hidden")—— 添加一个类，已存在也不报错 -
el.classList.remove("disabled")—— 移除指定类 -
el.classList.toggle("expanded")—— 有则删、无则加，适合开关类 -
el.classList.contains("active")—— 判断是否存在，用于条件逻辑
设置内联样式：批量用 className，单值用 style
直接操作 style 属性适合动态微调（如位置、颜色），但不宜替代 CSS 类：
-
el.style.color = "#333"、el.style.opacity = "0.8" - 注意 CSS 属性名转驼峰：
font-size → fontSize，z-index → zIndex - 避免链式写法如
el.style.cssText = "color:red; font-weight:bold"——会覆盖全部内联样式 - 真正需要动态样式组合时，应提前定义好 CSS 类，再用
classList切换
更新文本内容：textContent 是默认首选
除非明确需要渲染 HTML，否则一律用 textContent：
-
el.textContent = "Hello <world>"</world>会原样显示为文字，不解析标签，天然防 XSS -
el.innerText受 CSS 可见性影响（隐藏元素不计入），且性能略差，一般不用 -
innerHTML仅在可信 HTML 片段（如后端预渲染模板）中使用；绝不可拼接用户输入
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
