从培训班出来后，我靠一个爬虫项目敲开了大厂的门
大家好，我是阿杰，一名刚从“前端速成班”毕业三个月的新人。别笑！我知道很多人对培训班有偏见，但我想说：只要肯动手，谁都能逆袭。我当初学的时候，连 console.log 都打错成 consoel.log，被 Chrome 控制台疯狂报错嘲讽 😭。
但就在上个月，我把自己的第一个开源项目——一个用 JavaScript 写的简易网页爬虫——传到了 GitHub 上，居然收获了 87 个 star！更离谱的是，某大厂 HR 主动私信问我有没有兴趣聊聊实习岗位……
今天，我就手把手带你从 零基础 开始，做出你人生中第一个能跑的 JavaScript 爬虫项目。不用怕“爬虫”听起来多高大上，其实它就是个自动帮你“抄网页内容”的小机器人。咱们不碰法律红线，只爬公开、允许抓取的数据（比如天气、新闻标题）。
准备好了吗？一杯奶茶的时间，带你从“Hello World”走向“Hello GitHub”！
为什么是 JavaScript + 爬虫？
很多新手一听到“爬虫”，第一反应是：“那不是 Python 干的事儿吗？”
没错，Python 的 requests 和 BeautifulSoup 确实强大。但！作为前端学员，我们天然拥有 JavaScript 这把利器——而且浏览器本身就是最好的运行环境！
更重要的是：用 JS 做爬虫，能让你同时练到网络请求、DOM 操作、异步编程三大核心技能。面试官问“你会处理 API 吗？”，你直接甩出自己写的爬虫项目，比背八股文香多了！
💡 我当初学的时候，死记硬背
fetch和async/await总是混淆。直到自己写了个爬豆瓣电影的 demo，才真正搞懂——原来“等待数据回来”就像等外卖，不能边等边吃，得等到了才能开动！
第一步：搭环境，三分钟搞定
别被“开发环境”吓到！我们要做的爬虫项目，不需要装 Node.js、不用配 Webpack，打开浏览器就能跑！
所需工具清单：
| 工具 | 用途 | 是否必须 |
|---|---|---|
| Chrome 浏览器 | 运行和调试代码 | ✅ 必须 |
| VS Code（或任意文本编辑器） | 写代码 | ✅ 必须 |
| 一个支持 CORS 的代理（后面会讲） | 绕过浏览器安全限制 | ⚠️ 临时需要 |
📌 注意：浏览器出于安全考虑，默认禁止跨域请求（CORS）。但我们用一个小技巧就能绕过——用第三方代理服务！先别慌，我会一步步教你。
创建你的第一个项目文件夹
- 在桌面新建一个文件夹，比如叫
my-first-crawler - 里面新建一个文件：
index.html - 再新建一个文件：
crawler.js
搞定！这就是你的“项目”了，简单到哭。
第二步：JavaScript 爬虫的核心原理（说人话版）
想象你要去图书馆抄一段书的内容：
- 你走到书架前 → 相当于浏览器发起 HTTP 请求
- 你找到那本书 → 服务器返回 HTML 页面
- 你翻到第 50 页，抄下标题 → 用 JS 解析 DOM，提取目标数据
在 JS 里，这三步对应：
- 用
fetch()发请求 - 用
DOMParser把 HTML 字符串变成可操作的对象 - 用
querySelector或getElementById找到你要的元素
是不是瞬间接地气了？
第三步：动手！写一个爬“今日天气”的小工具
咱们的目标：爬取 https://wttr.in（一个极简天气服务）的当前城市天气，并显示在网页上。
✅ 该网站明确允许非商业爬取，且返回纯文本，非常适合新手！
Step 1：写 HTML 骨架
在 index.html 中输入以下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个爬虫</title>
</head>
<body>
<h1>🌤️ 今日天气预报</h1>
<button id="getWeather">点击获取天气</button>
<div id="result" style="margin-top: 20px; font-size: 18px;"></div>
<script src="crawler.js"></script>
</body>
</html>
这个页面很简单：一个按钮 + 一个显示区域。
Step 2：写 JavaScript 爬虫逻辑
打开 crawler.js，开始编码！
// 获取按钮和结果显示区域
const button = document.getElementById('getWeather');
const resultDiv = document.getElementById('result');
// 给按钮绑定点击事件
button.addEventListener('click', async () => {
try {
// 显示“正在加载”
resultDiv.textContent = '⏳ 正在获取天气...';
// 使用代理绕过 CORS 限制
const proxyUrl = 'https://api.allorigins.win/raw?url=';
const targetUrl = 'https://wttr.in/?format=3'; // 只要一行简洁天气
// 拼接最终请求地址
const fullUrl = proxyUrl + encodeURIComponent(targetUrl);
// 发起请求
const response = await fetch(fullUrl);
const weatherText = await response.text();
// 显示结果
resultDiv.textContent = `🌤️ ${weatherText.trim()}`;
} catch (error) {
resultDiv.textContent = '❌ 获取失败，请检查网络';
console.error('错误:', error);
}
});
代码逐行解释（新手友好版）：
async/await：让 JS “等”数据回来再继续执行，避免乱序api.allorigins.win：这是一个免费 CORS 代理，帮我们转发请求encodeURIComponent：把网址转成安全格式，防止特殊字符出错trim()：去掉天气文本前后的空格，看起来更干净
🔥 我当初学的时候，总忘记写
await，结果response是个 Promise 对象而不是真实数据，控制台打出[object Promise]，一脸懵。记住：凡是有.then()的地方，基本都能改成await！
第四步：测试你的爬虫！
- 双击打开
index.html（用 Chrome） - 点击“点击获取天气”按钮
- 等待 1-2 秒，你应该看到类似这样的结果：
🌤️ 北京: ☀️ +28°C
恭喜！你刚刚完成了一个真正的网络爬虫！虽然简单，但五脏俱全。
进阶挑战：爬取网页中的结构化数据
刚才爬的是纯文本，现在我们试试爬 带 HTML 结构的网页，比如新闻标题。
目标网站：https://example.com（这是个官方测试域名，内容固定）
改造思路：
- 获取整个 HTML 页面
- 用
DOMParser解析成虚拟 DOM - 用
querySelector提取<h1>标题
修改 crawler.js：
// 新增一个按钮用于测试新功能（你可以在 HTML 里加）
// 这里我们复用同一个按钮，按需切换逻辑
let mode = 'weather'; // 初始模式
button.textContent = '点击获取天气（再点换新闻）';
button.onclick = null; // 清除旧事件
button.addEventListener('click', async () => {
if (mode === 'weather') {
// ...（之前的天气代码）
mode = 'news';
button.textContent = '点击获取新闻标题';
} else {
// 新闻爬取逻辑
resultDiv.textContent = '📡 正在抓取新闻...';
try {
const proxy = 'https://api.allorigins.win/get?url=';
const newsUrl = 'https://example.com';
const res = await fetch(proxy + encodeURIComponent(newsUrl));
const data = await res.json(); // allorigins 返回 JSON 格式
const parser = new DOMParser();
const doc = parser.parseFromString(data.contents, 'text/html');
const title = doc.querySelector('h1').textContent;
resultDiv.innerHTML = `📰 新闻标题：<strong>${title}</strong>`;
mode = 'weather';
button.textContent = '点击获取天气';
} catch (e) {
resultDiv.textContent = '❌ 新闻抓取失败';
}
}
});
⚠️ 注意：这次用了
allorigins.win/get而不是/raw，因为它会返回包含 HTML 的 JSON 对象，方便解析。
新手常踩的 5 个坑 & 解决方案
| 问题 | 原因 | 解决办法 |
|---|---|---|
| 点按钮没反应 | JS 文件没正确引入 | 检查 <script src="crawler.js"> 路径是否正确 |
| 控制台报 CORS 错误 | 浏览器阻止跨域请求 | 务必使用代理（如 allorigins.win） |
fetch 返回 undefined |
忘记 await 或没处理 Promise |
用 async/await，并在 try/catch 中包裹 |
| 爬不到想要的内容 | 网站用了动态渲染（如 React/Vue） | 初期避开 SPA 网站，选静态 HTML 页面 |
| 数据乱码或带标签 | 没正确解析 HTML | 用 DOMParser，别直接 innerHTML |
🛑 特别提醒：不要爬需要登录的网站、不要高频请求、不要爬隐私数据！遵守
robots.txt规则，做个有底线的程序员。
你的第一个开源项目，就从这里开始！
现在，你已经有了一个能跑的爬虫 demo。下一步，把它变成 GitHub 上的开源项目：
- 注册 GitHub 账号（如果还没有）
- 在项目根目录新建
README.md，写清楚：- 项目是干嘛的
- 怎么运行（“双击 index.html 即可”）
- 示例截图（可用文字描述：“点击按钮后显示：🌤️ 北京: ☀️ +28°C”）
- 初始化 Git，推送到 GitHub
git init
git add .
git commit -m "feat: first crawler demo"
git branch -M main
git remote add origin https://github.com/你的用户名/my-first-crawler.git
git push -u origin main
💬 我当初 push 失败十几次，因为忘了
git remote add。别怕错，每个程序员都是在红字报错中成长的！
学完这篇，下一步学什么？
你已经掌握了：
- 浏览器端 JS 发请求
- 处理异步数据
- 解析 HTML 提取信息
接下来建议：
- 学 Node.js：让爬虫脱离浏览器，在服务器上跑（用
axios+cheerio） - 学 Puppeteer：控制无头浏览器，爬动态渲染页面
- 做更有用的项目：比如自动监控商品价格、抓取招聘信息等
但记住：别贪多！先把今天的 demo 跑通、改改、玩明白。我见过太多新手，教程看了 20 个，代码一行没写。
最后说两句心里话
培训班教会我语法，但真正让我成长的，是亲手做出一个能跑的东西。哪怕它只有 20 行代码，哪怕全世界只有你自己用——那也是你能力的证明。
所以，别等“准备好”。现在，立刻，马上，打开你的 VS Code，新建那个 index.html。
代码不会骗人，你敲下的每一行，都在为未来的 offer 加分。
我在 GitHub 等你来 star 你的第一个项目！✨
🌟 项目灵感来自真实经历。如果你觉得这篇教程帮到了你，不妨在评论区留下你的 GitHub 链接，我们一起互关互赞！
评论 0