如何使用 Vanilla JavaScript 从网页中抓取数据

在本教程中，我们将了解如何在浏览器的开发工具中使用 javascript 从任何网页抓取数据。

如果您曾经不得不手动将网页中的数据整理成不同的格式，例如电子表格或数据对象，您就会知道这是一个非常重复且令人厌烦的过程！

幸运的是，大多数浏览器都包含允许您随心所欲地操纵任何网页的工具。这些工具被称为开发者工具（通常称为开发工具），通常被 Web 开发者用来调试网站。我们将在本教程中使用它们。

本教程需要 JavaScript 的先验知识，因为我们将使用 javaScript 编写代码来处理与网页的交互和收集数据。 

1.访问开发工具

根据您使用的浏览器，访问开发工具的方法有多种：chrome 、safari 、Firefox 或Microsoft Edge 。最常见的方法是在网页上右键单击（或Control + 单击）并选择“检查”选项。

打开开发工具后，我们将使用的两个选项卡是元素选项卡和控制台选项卡。

Elements面板向我们展示了网页上存在的所有 html 元素，Console面板允许我们直接在网页中编写 JavaScript 代码。

2.识别元素

下一步是确定我们要从网页中抓取哪些元素。

例如，假设我们想要获取一个 Tuts+ 作者编写的教程列表。我们将在作者页面上打开开发工具，并使用检查选择器工具确定我们想要抓取的元素。

3.定位元素

下一步是使用 JavaScript从控制台面板定位元素。有多种方法可以使用 JavaScript 定位元素，在本教程中，我们将使用方法queryselectorAll()和querySelector()。

在上面的示例中，我们希望使用类名来定位所有元素posts_post。我们可以通过在控制台面板中输入以下命令来做到这一点：

let posts = document.querySelectorAll('.posts_post');

现在我们有一个变量posts，其中包含我们要从中收集数据的元素。

4.使用 JavaScript 操作元素

由于我们试图从网页中抓取数据，因此我们需要确定我们想要收集的数据。在这个例子中，让我们收集每个教程的标题和描述。

li.posts_post让我们编写一个函数，允许我们从posts变量中的每个收集标题和描述。

回到我们的网页并再次检查元素，我们看到标题文本包含在h1标签中，描述文本包含在div类名posts_post-teaser中。

为了定位这些元素，我们将以下命令写入控制台：

let postsObj = [...posts].map(post => (
  {
    title: post.querySelector('h1').innerText,
    description: post.querySelector('.posts__post-teaser').innerText
  } 
));

让我们分解上面代码中发生的事情：

• 创建一个新变量postsObj来存储操作数据

• 使用扩展语法[...] 将我们的posts变量从nodeList转换为数组。

• 使用map函数循环遍历帖子数组并对每个帖子进行操作 

• 定位文章中的h1andposts__post-teaser元素并将它们的 innerText 值存储在对象键标题和描述中

• 返回包含定义的键值对的对象值 

这是 postObj 值将返回的内容：

5.结论

回顾一下，为了从页面中抓取任何数据，我们：

1. 访问浏览器开发工具

2. 使用检查工具识别元素

3. 使用控制台面板来定位和收集元素的数据

4. 使用 map 方法将数据存储在 Javascript 对象中

当然，在开发工具中手动编写 JavaScript 代码并不是在网页上抓取数据的唯一方法，并且有许多 Web 抓取器扩展程序提供相同的功能而无需编写代码。

但是，此方法对于熟悉浏览器中的开发人员工具和了解如何使用 JavaScript 操作数据非常有用。