在爬取一個網站的時候,
感覺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,所以為空