JavaScript 是网页实现交互能力的必要基础，负责表单校验、事件响应、动态内容加载等；HTML 定义结构，CSS 控制样式，JavaScript 驱动行为与 DOM 操作，并配合 fetch 实现无刷新更新。
JavaScript 不是“让网页动起来”的装饰品，而是网页具备交互能力的必要基础——没有它，表单不能校验、按钮点击无响应、内容无法按需加载，页面就是一张静态快照。
网页默认是静态的，HTML 和 CSS 本身不执行逻辑
浏览器加载 HTML 后只构建文档结构，应用 CSS 后仅完成样式渲染。它们都不会监听鼠标、读取输入、发起网络请求或修改已有内容。比如一个登录按钮，光靠 HTML 只能显示文字和形状，点它什么也不会发生——除非用 JavaScript 绑定 click 事件并定义后续动作。
-
HTML定义“这是个按钮”，CSS定义“它长什么样”，JavaScript定义“点它时做什么” - 所谓“动起来”，本质是 DOM 节点被
JavaScript动态读取、修改、增删，再触发浏览器重绘 - 动画（如
transform或opacity变化）可以纯用 CSS 实现，但控制时机、条件、循环、暂停等行为仍需JavaScript
addEventListener 是交互的起点，不是只有 onclick 属性才管用
很多人以为给按钮加 onclick="doLogin()" 就算会用 JavaScript，但这只是最表层的写法。真正可控、可维护的交互依赖 addEventListener。
-
addEventListener支持同一元素绑定多个处理函数，而onclick属性会被覆盖 - 它能监听更丰富的事件类型：
input（实时捕获输入）、submit（拦截表单提交）、scroll（滚动监听）、DOMContentLoaded（确保 DOM 加载完成后再操作） - 容易漏掉的是事件委托：把事件监听器挂在父容器上，靠
event.target判断实际点击对象，这对动态添加的按钮特别关键
DOM 操作不是“改文字”，而是真实影响浏览器渲染树
调用 document.getElementById("msg").textContent = "成功" 看似简单，背后是 JavaScript 引擎修改内存中的 DOM 对象，触发浏览器布局（Layout）与绘制（Paint）流程。性能敏感场景下，频繁操作会卡顿。
立即学习“Java免费学习笔记（深入）”；
- 批量更新优先用
DocumentFragment或先display: none再批量修改，最后显示 - 避免在循环中反复读取
offsetHeight等会触发重排的属性 -
innerHTML虽然方便，但拼接不可信数据有 XSS 风险；应优先用textContent或createElement+appendChild
AJAX 和 fetch 让页面不用刷新就能换内容
传统网页跳转一次就要重载全部资源，用户体验割裂。现代页面通过 fetch 在后台请求新数据，再用 JavaScript 更新局部 DOM，实现“无刷新”效果。
-
fetch返回 Promise，必须用.then()或await处理响应，否则拿不到数据 - 常见错误是忘记检查
response.ok，导致 HTTP 404 或 500 被当成成功处理 - 服务端返回 JSON 时，必须显式调用
response.json()，它本身也是 Promise，不能直接当对象用
真正难的不是写出第一个 alert，而是理解何时该用原生 DOM API、何时该交由框架管理状态、以及哪些“动效”其实该交给 CSS 过渡而非 JavaScript 定时器驱动——边界模糊的地方，最容易写出又慢又脆的代码。
