Блог

Рассмотрим следующую иерархию в DOM

 <div class="bodyCells">
    <div style="foo">
       <div style="foo">
           <div style="foo1"> 'contains the list of text elements I want to scrape' </div>
           <div style="foo2"> 'contains the list of text elements I want to scrape' </div>
       </div>
       <div style="foo">
           <div style="foo3"> 'contains the list of text elements I want to scrape' </div>
           <div style="foo4"> 'contains the list of text elements I want to scrape' </div>
       </div>
  

Используя bodyCells имени класса, мне нужно извлекать данные из каждого из divs по одному (т.Е.) Сначала из 1-го div, затем из следующего div и так далее и сохранять их в отдельных массивах.Как я могу этого добиться? (с использованием puppeteer)

ПРИМЕЧАНИЕ: я пытался использовать имя класса напрямую для достижения этой цели, но он выдает все тексты в одном массиве. Мне нужно получать данные из каждого тега отдельно в разных массивах.

Ожидаемый результат:

 array1=["text present within style="foo1" div tag"] 
array2=["text present within style="foo2" div tag"] 
array3=["text present within style="foo3" div tag"]
array4=["text present within style="foo4" div tag"]
  

Как вы заметили, вы можете извлекать каждый из текстов в одном массиве, используя имя класса. Далее, если вы выполните итерацию по каждому из них, вы можете создать отдельный массив для каждого подраздела.

Я создал скрипку здесь — https://jsfiddle.net/32bnoey6 / — с помощью этого примера кода:

 const cells = document.getElementsByClassName('bodyCells');

const scrapedElements = [];
for (var i = 0; i < cells.length; i  ) {
    const item = cells[i];
  for (var j = 0; j < item.children.length; j  ) {
    const outerDiv = item.children[j];
    const innerDivs = outerDiv.children;
    for (var k = 0; k < innerDivs.length; k  ) {
        const targetDiv = innerDivs[k];
      scrapedElements.push([targetDiv.innerHTML]);
    }
  }
}

console.log(scrapedElements);