网页内容抓取工具(CSS选择器知识：/css/css_selector_type.asp这里再下整个定位网页内容的方法 )

　　网页内容抓取工具(CSS选择器知识：/css/css_selector_type.asp这里再下整个定位网页内容的方法

)

　　有时我们想在网页上获取一些内容。例如，作者希望在制作旋转贴图功能时获得一些示例图片链接。如果我们一个接一个地复制图片链接，效率太低，或者打开一个爬虫工具到采集，这太麻烦了，除非我们需要批量获取多个页面

　　本文为您提供了快速完成这些临时小需求的一些技巧。使用的知识是CSS的选择器功能

　　整个过程分为几个步骤，如下所述

　　一、get元素的CSS选择器表达式

　　目前，假设您已经了解一些CSS选择器知识。如果这一步不做，以后就没有意义了。任何网页采集的前提是您了解一些XPath和CSS选择器知识

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

　　如果你想了解更多关于CSS选择器的信息，你可以去学校和其他地方

　　例如，link:/CSS/CSS\uselectors.asp

　　还有更高级的CSS选择器知识：/CSS/CSS\uselector\uuuutype.asp

　　以下是查找web内容的整个方法

　　1.找到您想要的web内容，如图中的旋转图所示。右键单击[check]按钮定位此元素

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

　　在下图中，我们可以发现整个旋转图实际上是类为Promo BD的div节点下的内容，包括几个div，其中一个是我们定位的图像，另一个是一些隐藏的旋转图像

　　CSS选择器定位通常使用多个类名来限制其范围，即当前节点类名，然后查找其父节点的唯一类名以帮助定位

　　3.使用chropath工具帮助定位并找到与最终所需内容相对应的CSS选择器表达式

　　在ExcelCatalystWeb采集教程中，我曾经介绍过用于定位XPath的工具chropath。它还可以定位CSS选择器

　　如下图所示，我们找到了类名。推广BD，整个网页是独一无二的

　　缩小范围并添加每个旋转图表的特定类名mod。此时，CSS选择器表达式为[.Promo BD.mod]。这两个类之间有一个空格，这意味着在promo-BD类下查找后代mod类

　　此时，我们需要五张旋转图片来找到七个结果。有时，如果我们不能正确地找到它们，这并不重要。下载图片并排除多余部分可能比准确查找五个元素更方便

　　回到我们需要的图像链接元素，它是IMG节点，上层是a节点

　　因此，我们最后编写的CSS选择器是[.Promo BD.Mod A&gt；img]，大于号表示它是从父对象到子对象，而不是空间的任何后代

　　二、打开浏览器开发工具的[console]面板，输入指定命令以获取所需内容

　　首先给出最终结果，然后逐步解释原理

　　输入：数组。From（document.queryselectoral（“.Promo-BD.Mod A&gt；img”））。映射（s=&gt；s.currentsrc）。加入（“\n”）

　　也就是说，您可以获取所需的图片链接文本，将其复制粘贴到excel中并使用（excel catalyst具有批量下载功能，通过链接，您可以轻松地在本地下载链接内容并重命名自己的名称）

　　与Excel函数一样，多个函数嵌套以实现复杂的函数

　　1.use queryselectorall查询CSS选择器的内容

　　在下图中，我们可以看到一个收录7个对象的集合，然后将其展开。我们可以看到我们想要的内容在currentsrc属性中

　　2.convert 采集 to array

　　该数组的一个优点是，可以使用后续映射方法遍历和提取所需的内容

　　3.添加映射函数以遍历所需的元素属性

　　此时，上述对象数组已更改为字符串数组

　　4.最后一步是将数组转换成一个由换行符分隔的字符串

　　此时，在开始和结束时只有一个双引号，中间元素中没有双引号。它被复制而不进行任何处理

　　5.复制并粘贴到excel单元格中，然后只需处理并下载即可

　　最后，我们还发现有7个元素的原因是它们被重复了。在Excel中，只需转到下一个元素，即我们需要的5个元素

　　当然，最方便的方法是直接在Excel中处理并直接下载。这是Excel catalyst为您准备的[批量下载web文件]功能