javascript – Problem beim Crawlen der Webseite Jquery Selector First-Child

Question

Beim Crawlen einer Website habe ich das Gefühl, dass h2 und h3 die gleiche Struktur haben. Warum h2:first-child Daten abrufen kann, h3 jedoch nicht.

Die Endergebnisse h2_1 und h2_2 sind gleich, kein Problem.

h3_1 ist in Ordnung, h3_2 ist leer, warum ist das so?

Der Code lautet wie folgt:

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();


});

Answer 1

选择器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，所以为空