网页脚本怎么写

写网页脚本，第一件事不是脚本打开编辑器敲代码，而是网页搞清楚它跑在哪儿。浏览器里的脚本 JavaScript 和 Node.js 里的 JavaScript 看着像亲兄弟，实际上脾气差很远。网页浏览器脚本能直接摸到 document、脚本window，网页能改页面、脚本弹窗、网页发请求；Node 脚本则去读写文件、脚本开服务器。网页你要是脚本把 document.write 扔进 Node 里，它只会给你一个冷漠的网页 ReferenceError。

所以先问自己：这个脚本是脚本要在用户浏览器里蹦跶，还是网页在服务器上默默干活？答案不同，写法完全两样。下面聊的主要是浏览器里的脚本，毕竟大多数人说的“网页脚本”就是这个意思。

从一行代码开始

别急着写 function 和 class。先打开一个 HTML 文件，在 <body> 结束标签前塞进一对 <script> 标签：

<script> alert('嘿，我跑起来了'); </script>

刷新页面，弹窗出来，说明脚本位置对了。为什么放 </body> 前面？因为浏览器从上往下解析 HTML，脚本放太早，它想操作的按钮还没出生呢。你写 document.querySelector('#btn') 只会拿到 null，然后报错。这坑我踩过无数次，现在养成了习惯——要么把脚本放底部，要么给 <script> 加上 defer 属性。

操作页面：别只会 getElementById

新手最爱 document.getElementById('foo')，但它只能按 ID 找。实际项目里更常用 querySelector 和 querySelectorAll，它们吃 CSS 选择器，灵活得多。比如你想给所有带 .card 类的元素加个点击效果：

const cards = document.querySelectorAll('.card'); cards.forEach(card => {  card.addEventListener('click', () => {  card.classList.toggle('active'); }); });

注意 querySelectorAll 返回的是 NodeList，不是数组。老版本浏览器里它没有 forEach，得用 Array.from() 转一下。现在基本不用管了，但如果你要兼容 IE……祝你好运。

事件监听：别把 onclick 当亲爹

行内写法 <button onclick="doSomething()"> 看着方便，实际上把 HTML 和 JS 搅成一锅粥。改个函数名得满文件搜，而且同一个元素只能绑一个 onclick，后绑的会覆盖前面的。用 addEventListener 干净得多，还能绑多个：

const btn = document.querySelector('#submit'); btn.addEventListener('click', handleSubmit); btn.addEventListener('click', logClick); // 两个都会执行

有个细节：addEventListener 的第三个参数可以传 { once: true }，让监听器只触发一次。做一次性弹窗或者初始化逻辑时特别省心，不用手动 removeEventListener。

异步请求：fetch 比 XMLHttpRequest 香

以前写 AJAX 要 new XMLHttpRequest()，然后监听 onreadystatechange，判断 readyState === 4，再检查 status === 200……一套下来十几行没了。现在用 fetch 清爽得多：

fetch('/api/user') .then(res => {  if (!res.ok) throw new Error('请求翻车了'); return res.json(); }) .then(data => console.log(data)) .catch(err => console.error(err));

或者用 async/await 写得更像同步代码：

async function loadUser() {  try {  const res = await fetch('/api/user'); const data = await res.json(); document.querySelector('#name').textContent = data.name; } catch (err) {  console.error('加载失败', err); } }

注意 fetch 只在网络错误时 reject，HTTP 404 或 500 它照样 resolve。所以必须手动检查 res.ok，不然你会拿到一个空对象然后一脸懵。

调试：console.log 不丢人

别觉得用 console.log 调试低级。Chrome DevTools 里 console.table 打印数组对象更直观，console.time 和 console.timeEnd 能测性能，debugger 语句直接断点。我见过有人写 alert 调试，弹窗点到手软，那才叫折磨。

还有，打开 DevTools 的 Sources 面板，在代码行号上点一下就能下断点，比满屏 console.log 高效多了。变量值、调用栈、作用域链一目了然。

最后说一嘴模块化

脚本一多，全塞进一个 <script> 里就是灾难。用 type="module" 把代码拆成多个文件，通过 import 和 export 组织：

<script type="module" src="main.js"></script>

然后在 main.js 里 import { init } from './utils.js'。模块默认是延迟执行的，不会阻塞 HTML 解析，而且每个模块有自己的作用域，不会污染全局。现代浏览器都支持，放心用。

写网页脚本没什么高深魔法，就是多写、多踩坑、多打开 DevTools 看。你盯着控制台报错改上十遍，比看一百篇教程都管用。