抓取网页新闻(Excel催化剂网页采集教程：获取所要元素的CSSSelector功能 )

　　抓取网页新闻(Excel催化剂网页采集教程：获取所要元素的CSSSelector功能

)

　　有时我们想在网页上获取一些内容。比如作者在做轮播功能的时候，想要获取一些示例图片链接。如果把图片链接一个一个复制，效率太低了，还是开个爬虫工具吧。采集，除非你需要批量获取多个页面，否则太麻烦了。

　　本文给你一个小技巧，快速完成这些小临时需求。用到的知识是CSS的选择器函数。

　　整个过程分为几个步骤，下面分别说明。

　　一、获取所需元素的CSS Selector表达式

　　假设您已经对 CSS Selector 有所了解。如果你没有通过这一步，以后就没有意义了。任何网页采集的前提是你对xpath和CSS Selector有一点了解。

　　在现代 Web 技术中，CSS 被广泛用于布局页面。相对而言，使用 CSS 选择器可能比 xpath 更方便定位网页内容。毕竟，前端工程师自己使用 CSS 来定位和格式化元素。我们使用它来定位元素并仅获取内容。

　　如果想详细了解具体的CSS选择器，可以去W3School等地方学习。

　　例如这个链接：

　　下面是更高级的 CSS 选择器知识：

　　这是定位网页内容的整个方法

　　1. 找到你想要的网页内容，如轮播图，右键【检查】按钮，定位到这个元素

　　2. 观察整个网页元素结构，特别注意上面的父节点

　　下图中我们可以发现整个carousel图片其实就是一个类promo-bd的div节点下的内容，里面收录了几个div，一个是我们定位的图片，其他的是一些隐藏的轮播图像。

　　CSS选择器定位一般使用多个类名来限定其作用域，即当前节点的类名，然后找到其父级唯一的类名来辅助定位。

　　3.使用ChroPath工具辅助定位，找到最终内容对应的CSS Selector表达式。

　　在Excel催化剂网页的采集教程中，我曾经介绍过ChroPath这个工具，用来定位Xpath，也可以定位CSS Selector。

　　如下图所示，我们找到了类名.promo-bd，它是整个网页唯一的。

　　然后缩小范围并添加每个轮播的特定类名 mod。此时CSS Selector表达式为[.promo-bd.mod]，两个类之间有一个空格，表示要找到promo-bd类mod类的后代。

　　此时，我们找到了 7 个结果。我们需要的是 5 个轮播图像。有时我们找不到它们也没关系。下载图像并排除额外的部分可能比找到 5 个元素更方便。

　　回到我们需要的图片链接元素，就是img节点，上层是a节点。

　　所以我们最后写的CSS Selector是[.promo-bd .mod a>img]，大于号代表父子，不是空间的任何后代。

　　二、打开浏览器开发工具的【控制台】面板，输入指定命令获取需要的内容

　　先给出最终的结果，然后再一步一步慢慢讲解原理。

　　输入：Array.from(document.querySelectorAll(".promo-bd .mod a>img")).map(s=>s.currentSrc).join("\n")

　　只需获取你想要的图片链接文字，自己复制粘贴到Excel中即可（Excel Catalyst有批量下载功能，有链接，你可以方便的将链接内容下载到本地，自定义你需要的名字）。

　　像Excel函数一样，可以嵌套多个函数来实现复杂的功能。

　　1.使用querySelectorAll查询CSS Selector的内容

　　在下图中，我们可以看到我们找到了一个收录7个对象的集合，然后展开它就知道我们想要的内容在currentSrc属性中。

　　2.把集合变成数组

　　数组的优点之一是可以使用后续的map方法遍历提取自己想要的内容。

　　3. 加上map函数遍历你需要的元素属性

　　这时候上面的对象数组已经转化为一个人字串数组

　　4. 最后一步是将数组转换为字符串，用换行符分隔

　　这时候开头和结尾只有一个双引号，中间元​​素没有双引号，不做任何处理就复制了。

　　5. 复制并粘贴到 Excel 单元格中，然后简单地处理和下载

　　最后，我们还发现，7个元素之所以出现，是因为它们已经重复出现了。只需删除 Excel 中的重复项，这就是我们想要的 5 个元素。

　　当然，最方便的方法是直接在Excel中处理，直接下载。这就是Excel Catalyst为大家准备的【批量下载网页文件】功能。