最稳妥获取元素的方式是通过 ID 使用 document.getElementById('myId')；无 ID 时用 document.querySelector() 或 querySelectorAll()；改样式优先操作 classList 或预设 CSS 类，避免硬编码 style。
用 document.getElementById 或 document.querySelector 获取元素最稳妥
直接通过 ID 获取是最常用也最不容易出错的方式：document.getElementById('myId')。如果元素没有 ID，用 document.querySelector('.class-name') 或 document.querySelector('button[data-action="submit"]') 更灵活。注意 querySelector 只返回第一个匹配项，要选多个得用 querySelectorAll，它返回的是 NodeList（不是数组，不能直接用 map，需转成数组或用 forEach）。
改内联样式优先用 element.style.xxx，但注意属性名是驼峰式
比如 HTML 里写 font-size: 14px，JS 中必须写成 element.style.fontSize = '14px'；background-color → backgroundColor；z-index → zIndex。别漏掉单位（如 px、%），数值 0 也要带单位（'0px' 而非 0）。这种方式只影响 style 属性，不覆盖 CSS 文件里的规则，除非加 !important（但 JS 里没法直接设 !important）。
批量改样式或复用逻辑，推荐切换 className 或操作 classList
硬编码 style 容易混乱，尤其涉及多属性、响应式或主题切换时。更可靠的做法是预先在 CSS 里定义好类，比如：
.highlight { background: yellow; font-weight: bold; }
然后 JS 中：
立即学习“Java免费学习笔记（深入）”；
-
element.className = 'highlight'（会覆盖原有所有 class） -
element.classList.add('highlight')（追加，不干扰其他 class） -
element.classList.toggle('active')（有则删，无则加） -
element.classList.contains('disabled')（判断是否存在）
注意 classList 在 IE10+ 支持，IE9 及以下需用 className 字符串拼接（不推荐新项目兼容）。
修改样式后 DOM 没反应？可能是重排/重绘时机或 CSS 优先级问题
常见假象：代码执行了，但视觉没变。先检查控制台是否报错（比如元素为 null）；再确认 CSS 选择器优先级是否压过了 JS 设置的内联样式（用开发者工具看 computed 样式里哪条被划掉了）；还有种情况是样式变更被浏览器合并了——比如连续改 top 和 left，可能只触发一次重排。需要强制重排可读取一个布局相关属性，如 element.offsetHeight，但这是性能陷阱，仅调试时用。
真正复杂的样式逻辑（比如动画、主题切换、响应式状态），别堆在 JS style 操作里，该抽 class 就抽，该用 CSS 变量就用 element.style.setProperty('--color', 'red')。
