JavaScript 是现代前端唯一能响应用户操作、修改DOM、发起网络请求的执行层，HTML和CSS无交互能力；它直接操作DOM节点树，通过document对象读写元素，修改内容、类名、样式或创建插入新节点，并需与HTML语义结构和CSS规则协同设计。
JavaScript 不是“让网页动起来”的可选插件，而是现代前端唯一能响应用户操作、修改页面结构、发起网络请求的执行层。没有它，HTML 是静态文档，CSS 是静态样式表，二者都无法在用户点击、输入、滚动时产生任何反馈。
JavaScript 如何直接操作 HTML 元素
浏览器将 HTML 解析为 DOM（文档对象模型），JavaScript 通过 document 对象与之交互。这不是“绑定”或“配合”，而是直接读写内存中的节点树。
-
document.getElementById("btn")获取元素后，可立刻修改element.textContent或element.classList.add("active") -
document.createElement("div")创建新节点，再用parent.appendChild(newDiv)插入到真实 DOM 中——这会触发浏览器重排与重绘 - 直接赋值
input.value = "hello"比监听 input 事件后再取值快一个数量级，但不会触发input事件，表单库可能因此漏掉状态更新
CSS 样式变更必须经由 JavaScript 触发才具备交互意义
CSS 自身只能响应伪类（如 :hover）或媒体查询，无法响应数据变化、异步加载完成、API 返回结果等真实业务逻辑。此时必须靠 JavaScript 操控 class 或 style。
- 用
element.classList.toggle("loading")切换预定义的 CSS 动画类，比直接改element.style.opacity = 0.5更利于维护和硬件加速 -
getComputedStyle(element).height返回的是计算后值（如"42px"），但无法读取 CSS 变量值；要读--main-color，得用getComputedStyle(element).getPropertyValue("--main-color") - 频繁修改
element.style.left会强制同步布局（layout thrashing），应改用transform: translateX()并确保该元素已启用 GPU 层（will-change: transform或transform: translateZ(0)）
三者协作的典型错误链：从 HTML 结构缺陷开始
很多“JS 不生效”“样式不更新”问题，根源不在 JS 或 CSS，而在 HTML 的初始结构设计不合理。
立即学习“Java免费学习笔记（深入）”；
- 把按钮写成
<div onclick="handleClick()">提交</div>：语义缺失、无键盘焦点、屏幕阅读器不可访问；正确做法是用<button type="button">并用addEventListener绑定 - 在
<head>中引入 JS 脚本但未加defer，导致document.getElementById查不到尚未解析的元素，报错Cannot read property 'addEventListener' of null - CSS 写了
.card:hover { transform: scale(1.02); }，但 JS 动态插入的卡片没加class="card"，hover 效果自然失效——不是 CSS 失灵，是选择器没匹配到
const button = document.querySelector("button");
button.addEventListener("click", () => {
const card = document.createElement("article");
card.className = "card"; // 必须显式设置 class，否则 CSS 规则不生效
card.innerHTML = "<p>动态加载的内容</p>";
document.body.appendChild(card);
});
真正难的不是分别学懂 HTML、CSS、JS，而是在写第一行 HTML 时就想好后续哪些节点需要被 JS 查询、哪些状态需要靠 class 控制、哪些动画必须用 transform 避免重排——三者从一开始就是同一张网的经纬线，剪断任意一根，整个交互就断了。
