从复杂的 DOM 结构中抓取文本

Question

考虑 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 ，我需要一次从每个 div 中抓取数据（即）最初从第一个 div，然后从下一个 div 等等，并将其存储在单独的数组中。 我怎么可能做到这一点？ （使用傀儡）

注意：我尝试直接使用类名来实现这一点，但是，它在单个数组中提供了所有文本。 我需要从不同数组中的每个标签分别获取数据。

预期输出：

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"]

Answer 1

正如您所指出的，您可以使用类名获取单个数组中的每个文本。 接下来，如果您遍历其中的每一个，您可以为每个小节创建一个单独的数组。

我在这里创建了一个小提琴 - 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);