從復雜的 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);