JavaScript操作DOM和CSS样式的三大核心是：获取元素（如getElementById、querySelector）、修改内容结构（textContent、innerHTML、appendChild等）、动态改样式（行内style、classList切换、insertRule）。
JavaScript操作DOM元素和动态修改CSS样式是前端开发中的基础能力，核心在于获取元素后通过属性或方法控制其结构、内容和样式。
获取DOM元素的常用方法
操作前必须先选中目标元素：
- document.getElementById("id")：通过唯一ID获取单个元素
-
document.querySelector("选择器")：支持CSS选择器（如
.box、div[data-type="header"]），返回第一个匹配项 - document.querySelectorAll("选择器")：返回所有匹配的NodeList，可遍历操作
- element.children 或 element.parentNode：通过已有元素关系查找相邻或嵌套节点
修改元素内容与结构
拿到元素后可直接更新其内部信息或布局：
- element.textContent = "文本"：安全设置纯文本，不解析HTML
- element.innerHTML = "<span>带标签的内容</span>"：写入HTML字符串（注意XSS风险）
- element.setAttribute("class", "active") 或 element.className = "active"：修改class属性
- element.appendChild(newElement)、element.insertBefore()、element.remove()：增删子节点
动态修改CSS样式的三种方式
根据作用范围和维护性，推荐不同场景下使用：
立即学习“Java免费学习笔记（深入）”；
-
修改行内样式：element.style.propertyName = "value"
如
box.style.color = "red"、box.style.marginTop = "10px"。注意CSS属性名转驼峰（background-color → backgroundColor） -
切换CSS类名：element.classList.add/remove/toggle("className")
推荐方式，把样式逻辑写在CSS文件里，JS只控制开关。例如：
btn.classList.toggle("disabled") - 动态插入CSS规则（较少用）：document.styleSheets[0].insertRule(...) 适合运行时生成全局样式，但兼容性和可维护性较低，一般用于主题切换等特殊需求
注意事项与建议
实际开发中需关注性能与可读性：
- 避免频繁读写
element.style，可能触发重排重绘；批量样式变更建议用class切换 - 使用
getComputedStyle(element)获取最终计算样式（只读），不能用于设置 - 操作前检查元素是否存在，防止
Cannot read property 'xxx' of null - 现代项目中，优先用
classList管理状态类，比拼接字符串更可靠
