Создание L oop для получения Элемента Внутренний HTML

Question

Я пытаюсь создать al oop, который будет перебирать каждый элемент и читать внутренний html всех его дочерних элементов. У меня возникают трудности при переборе каждого дочернего элемента.

Вот пример html, с которым я работаю:

<div id="section-content">
    <div class="matches">
        <div class="day day-28-1">
            <h4>Sat, March 28, 2020</h4>
            <div class="day-wrap">
                <div class="match region-7-57d5ab4-9qs98v">
                    <h3 class="time">2:00PM 
                        <span>(Central Daylight Time)</span>
                        <span class="fr">Best of 7</span>
                    </h3>
                </div>
                <div class="match region-7-57d5ab4-9qs98v">
                    <h3 class="time">3:00PM 
                        <span>(Central Daylight Time)</span>
                        <span class="fr">Best of 7</span>
                    </h3>
                </div>
                <div class="match region-7-57d5ab4-9qs98v">
                    <h3 class="time">4:00PM 
                        <span>(Central Daylight Time)</span>
                        <span class="fr">Best of 7</span>
                    </h3>
                </div>
            </div>
        </div>

        <div class="day day-28-1">
            <h4>Sat, March 29, 2020</h4>
            <div class="day-wrap">
                <div class="match region-7-57d5ab4-9qs98v">
                    <h3 class="time">2:00PM 
                        <span>(Central Daylight Time)</span>
                        <span class="fr">Best of 7</span>
                    </h3>
                </div>
                <div class="match region-7-57d5ab4-9qs98v">
                    <h3 class="time">3:00PM 
                        <span>(Central Daylight Time)</span>
                        <span class="fr">Best of 7</span>
                    </h3>
                </div>
                <div class="match region-7-57d5ab4-9qs98v">
                    <h3 class="time">4:00PM 
                        <span>(Central Daylight Time)</span>
                        <span class="fr">Best of 7</span>
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>

Я пытаюсь прочитать внутренний html каждый элемент h3. Вот где я нахожусь с этим.

//Gets number of ".day" elements in the html file
    const dayElement = totalMatches[0].evaluate(() => {
        return document.querySelector('.matches').childElementCount;
    });

    const dayCount = await dayElement.then(function(dayCount) {
        return dayCount;
    });

//iterates through each ".day" element
for (j = 0; j < dayCount; j++) {
//This determines how many times the inner for loop will run
     const matchElements = await page.$$('#section-content > div.matches > div.day');
     const matchCount = await matchElements[j].$eval('div', (div) => div.childElementCount);
     console.log(matchCount);

     const gameTimeElements = await page.$$('#section-content > div.matches > div.day > .day-wrap');

//iterates through each ".match" of specified ".day" element
for (i = 1; i <= matchCount; i++) {
     const element = await gameTimeElements[j].$eval('h3', (h3) => h3.innerHTML);
     console.log(element);
}
i = 1;
}

Я понимаю, что моя секунда для l oop не проходит через каждый элемент ".match". В настоящее время он захватывает только первый. Я просто не понимаю, как я перебрал бы каждый элемент.

Answer 1

Не проще ли получить их все сразу?

await page.evaluate(() => [...document.querySelectorAll('h3')].map(h3 => h3.innerHTML))