爬虫分析必备技能：Chrome浏览器使用$x()快速提取列表内容

willgon123

已于 2023-07-28 15:27:40 修改

阅读量599

点赞数 1

文章标签： chrome 前端 html 爬虫

于 2023-07-28 15:26:16 首次发布

本文链接：https://blog.youkuaiyun.com/u010182162/article/details/131980895

版权

通过使用console.log和$x()在开发者工具中，结合XPath快速提取优快云首页热点列表的标题和副标题。通过循环遍历获取多个元素的内容，并存储到数组中，然后复制输出。这种方法适用于其他页面的列表数据提取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

尝试快速打印一个页面的列表信息，我尝试用console.log+$x()快速打印结果。

先找到一个合适的测试对象，比如csdn首页的热点：

按F12进入开发者工具找到这个列表的xpath：

根据我写的xpath找到了5个：

尝试把其中一个的标题打印出来:

副标题打印出来：

完美打印。

现在我需要快速把5个的标题和副标题都提取出来：

写一个循环操作，贴到控制台，按Enter：

拿到了：

点击右键复制object：

粘贴到文本文档，成功拿到结果：

上述的完整代码如下：

var listCount = $x("//div[@class='headswiper'][2]/div[contains(@class, 'headswiper-content')]//div[@class='headswiper-item']").length;
var tmpList = [];
for(var i=0; i<listCount; i++){
    var text1 = $x("//div[@class='headswiper'][2]/div[contains(@class, 'headswiper-content')]//div[@class='headswiper-item']//a[@class='title']/text()")[i].textContent;
    var text2 = $x("//div[@class='headswiper'][2]/div[contains(@class, 'headswiper-content')]//div[@class='headswiper-item']//p[@class='name']/text()")[i].textContent;
    tmpList.push(text1+"     "+ text2);
}
console.log(tmpList);

想快速提取其他页面的列表文字，把xpath路径改一下即可。

觉得不错，点个赞呗！