JavaScript是运行在浏览器中的脚本语言，通过内联、内部或外部三种方式嵌入网页，常用document.getElementById获取DOM元素，推荐使用addEventListener绑定事件，fetch API实现无刷新数据加载。
JavaScript 怎么嵌入到网页中
有三种常见方式，选哪种取决于代码规模和维护需求：
- 内联写法（仅用于极简调试）：
onclick="alert('Hello')"—— 不推荐，逻辑和结构混在一起，难维护 - 内部脚本：在
或底部写—— 适合小项目或快速验证 - 外部文件：用
引入独立的.js文件 —— 推荐，利于缓存、复用和团队协作
注意： 默认同步执行，会阻塞 HTML 解析；如需避免卡顿，可加 defer（按顺序延迟执行）或 async（异步并行下载+执行，不保证顺序）。
document.getElementById 是最常用的 DOM 操作入口
网页是树状结构（DOM），JavaScript 要操作页面元素，第一步几乎总是找到它。而 document.getElementById 是最直接、兼容性最好、性能也够用的方式。
例如，想点击按钮后改变一段文字：
立即学习“Java免费学习笔记（深入）”；
初始内容
常见错误：
- 脚本执行时 DOM 还没加载完 → 报错
Cannot read property 'onclick' of null—— 解决办法：把放在前，或监听DOMContentLoaded事件 - ID 写错或重复 → 返回
null或取到错误元素 —— 检查浏览器开发者工具的 Elements 面板确认 ID 是否唯一且拼写一致
事件监听比 onclick= 更灵活可靠
onclick="..." 和 element.onclick = ... 都只能绑定一个处理函数；而 addEventListener 支持多次调用、可移除、支持捕获/冒泡阶段控制。
比如要同时响应点击和键盘回车：
const btn = document.getElementById('btn');
btn.addEventListener('click', handleAction);
btn.addEventListener('keydown', function(e) {
if (e.key === 'Enter') handleAction();
});
function handleAction() {
console.log('触发了');
}
关键细节：
- 事件名是字符串，如
'click'、'input'、'submit'，不是'onClick' - 不要在监听器里直接写
handleAction()（带括号），否则函数立即执行；应写handleAction（不带括号）传引用 -
表单提交默认刷新页面 → 用
e.preventDefault()阻止，这是 AJAX 提交前必做的一步
fetch API 替代 XMLHttpRequest 实现无刷新数据加载
现代网页大量依赖后台数据，但又不想整页重载。用 fetch 发起请求最简洁：
fetch('/api/user')
.then(response => response.json())
.then(data => {
document.getElementById('name').textContent = data.name;
})
.catch(err => console.error('加载失败:', err));
注意点：
-
fetch默认不带 cookie → 需显式加{ credentials: 'include' }才能维持登录态 -
response.json()返回 Promise，不能直接用response.body—— 必须先等解析完成 - 网络错误（如断网）会进
catch；HTTP 错误码（如 404、500）仍算“成功”，需手动检查response.ok
真实项目里，这些细节漏掉一个，就可能让用户看到空白页或无限 loading。
