javascript - 爬取网页Jquery选择器first-child的问题

问题描述

在爬取一个网站的时候，感觉h2 和 h3 是一样的结构，为什么 h2:first-child 可以取到数据， h3就不行。

最终的结果h2_1和h2_2是一样的，没问题。h3_1是ok的，h3_2是空，请问这是为什么？

代码如下，

const jsdom = require(’jsdom’);const jquery = require(’jquery’);jsdom.env(’https://www.osram.com/os/news-and-events/spotlights/index.jsp’, [], { defaultEncoding: ’utf-8’}, function(err, window) { if(err) {console.error(’error get news url from page [%s]’);return; } let $ = jquery(window); let el = $(’p.col-xs-6.col-sm-7.colalign:first’); let h2_1 = $(el).find(’h2.font-headline-teaser’).text(); console.log(’h2_1=’ + h2_1); let h2_2 = $(el).find(’h2.font-headline-teaser:first-child’).text(); console.log(’h2_2=’ + h2_2); let h3_1 = $(el).find(’h3.font-sub-headline’).text(); console.log(’h3_1=’ + h3_1); let h3_2 = $(el).find(’h3.font-sub-headline:first-child’).text(); console.log(’h3_2=’ + h3_2); window.close();});

问题解答

选择器xxx:first-child是指，xxx的父元素的第一个子元素为xxx时，选中xxx，需要同时满足这两个条件。

不是xxx父元素的第一个子元素，也不是xxx的父元素的子元素中第一个xxx

h2.font-headline-teaser的父元素的第一个子元素为h2.font-headline-teaser，所以能选中

h3.font-sub-headline的父元素的第一个子元素不是h3.font-sub-headline，所以为空