获取css selector,使用CSS Selector进行网抓

Power BI Desktop 5月更新来了，在网抓方面增加了一个新功能———使用示例提取表。

使用前需在设置-预览功能中，勾选"新的通过Web体验"。

该功能类似于智能填充以及添加示例中的列，允许用户手动输入目标数据，并根据输入内容智能分析转换规则，获取到网页中具有同样样式的其他数据。

但从初步体验来看，明显还不够智能，测试了几个稍微复杂点的网页都抓不到数据，所以不应太过依赖可视化界面操作。

该功能的背后则是5月新增的两个函数Web.BrowserContents以及Html.Table。

其中前者用于获取网页的Html源码，初步探究其作用相当于Text.FromBinary和Web.Contents的组合，第二参数的用法还需进一步测试。后者能够返回包含指定CSS Selector所有内容的表，是实现CSS Selector网抓的核心函数。

这两个函数目前只能在PBID中使用，预计在一个月内会更新到Excel中的Power Query。

CSS Selector是用于定位网页中元素的一种常见方法，其他的方法还有Xpath等。

如果把网页比作房子，Html相当于房子的骨架，用于设定网页的结构和内容；CSS是层叠样式表，用于控制网页中的样式，相当于房子的外观，比如墙刷什么颜色，地板用什么材质等等；JS相当于家电，比如空调、洗衣机等等，用于给房子增加一些功能。

在Html.Table出现之前，如果要抓的网页为非结构化数据，即不包含表、Json或Xml，要定位到某个值只能将获取网页源代码后当成文本处理，既复杂又不准确。

而有了这个函数，就能够根据网页中特定的样式，定位到指定位置的值。

用法主要有两种：

1、抓取不同网页中同一位置的值

比如已知商品的URL，要批量抓取商品售价。

实现如下的效果：

对于不同网页中的不同商品，虽然售价的数字不同，但是使用的颜色、字体等样式都是相同的，所以可以根据用来描述售价的CSS Selector来定位，从而抓取不同网页中同一位置的值。

首先以iPhone X的网页为例，URL为https://item.jd.com/5089253.html，在浏览器中右击红色的售价数字，选择检查，调出调试窗口。窗口中自动定位并高亮了所选位置的源码，右击源码，选择Copy-Copy selector。

然后进入查询编辑器构建函数，Web.BrowserContents("http://item.jd.com/5089253.html")获取网页源代码；Html.Table第一参数为源代码，第二参数为大的list中套小list，每一个小list表示一列，包含列名及CSS Selector，把刚才复制的内容粘贴进去即可得到单个网页中的售价。

let

源 = Html.Table(Web.BrowserContents("https://item.jd.com/5089253.html"),

{

{"售价",

"body > div:nth-child(9) > div > div.itemInfo-wrap > div.summary.summary-first > div > div.summary-price.J-summary-price > div.dd > span.p-price > span.price.J-p-5089253"

}

})

in

源

由于其他网页中的售价也是同样的样式，所以同样的公式应该就能批量获取到所有网页中的售价。但是如果真的这么做，会发现其他网址中的售价都为空，结果不正确。

再回头来分析下刚才复制的CSS Selector，内容为：

body > div:nth-child(9) > div > div.itemInfo-wrap > div.summary.summary-first > div > div.summary-price.J-summary-price > div.dd > span.p-price > span.price.J-p-5089253

结构大致为A.a > B.b > C.c，具有多个节点，表示具有a属性的A标签下具有b属性的B标签下具有c属性的C标签。

再复制其他网页中的CSS Selector进行对比，发现前面都是一样的，只有最后一个节点的span.price.J-p-5089253不同。

而在前一个节点span.p-price下具有两个节点，一个用来描述人民币符号，另一个用来描述数字。

所以可以把最后一个节点中不同的属性删除，写成span.price，同样可以获取到数字"8316"。也可以直接把最后一个节点删除，仅定位前一个节点，获取结果为"￥8316"。

复制的完整CSS Selector非常长，而填入函数中的参数通常可以简化。

比如在这个网页中，仅用span.p-price这一个节点足以定位，只需要确保描述的唯一性即可，代码为= Table.AddColumn(源, "售价", each Html.Table(Web.BrowserContents([网址]),{{"售价","span.p-price"}})[售价]{0})

2、抓取同一网页中不同位置的同属性值

比如在iPhone X的网页中，具有公开版、原厂延保版、双网通版等多个版本，这些值使用了同样的样式，则可使用CSS Selector批量抓取。

首先选择其中任一版本复制CSS Selector，比如复制"蓝牙二级套装"，内容为#choose-attr-2 > div.dd > div:nth-child(5) > a。

注意不要选择网页中默认框选的版本，因为样式不同。

可多复制几个进行对比，发现只有倒数第二个节点不同。

div:nth-child(5)，表示父元素div中的第5个子元素，现在是要获取所有子元素，把该节点中的属性删除即可，改为#choose-attr-2 > div.dd > div > a。

代码为= Html.Table(Web.BrowserContents("https://item.jd.com/5089253.html"),{{"版本","#choose-attr-2 > div.dd > div > a"}})

有关CSS Selector的更多技巧可自行百度。