遍历复杂的 DOM 并抓取值答案

【问题标题】：Traversing a complex DOM and scraping values遍历复杂的 DOM 并抓取值
【发布时间】：2020-10-21 16:08:22
【问题描述】：

考虑 DOM 中的以下结构。

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

通过使用类名 bodyCells，我需要从每个 div 一次一个（即）首先从第一个 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"]

这是我到目前为止所做的：

 var value=[];
value = await page1.evaluate(() =>{
if (!window.document){window.document = {};}
var textitems=[]
var extracted_items=[]
textitems = document.getElementsByClassName("bodyCells");
for (var i = 0; i < textitems.length; i++) {
  item=textitems[i].textContent
  extracted_items.push(item);
}
  return extracted_items;
});

【问题讨论】：

for (const div of textitems[0].querySelectorAll("div")) { console.log(div); }
我需要将每个 div 的值存储在单独的数组中。我怎么做？ @gillall
试试这个内部循环： if (/[0-9a-zA-Z]/.test(div.childNodes[0].data)) result.push([div.childNodes[0] 。数据]）。但这仅适用于您的数据。如果想要轻松抓取，您必须使用 ids、classes 和标签

标签： javascript dom web-scraping puppeteer innerhtml

【解决方案1】：

不确定这是否是您需要的...

const html = `
  <!doctype html>
  <html>
    <head><meta charset="UTF-8"><title>Test</title></head>
    <body>
      <div class="bodyCells">
        <div style="foo">
          <div style="foo">
            <div style="foo">
              <div style="foo1"> '1-contains the list of text elements I want to scrape'</div>
              <div style="foo2"> '2-contains the list of text elements I want to scrape'</div>
            </div>
            <div style="foo">
              <div style="foo3"> '3-contains the list of text elements I want to scrape'</div>
              <div style="foo4"> '4-contains the list of text elements I want to scrape'</div>
            </div>
          </div>
        </div>
      </div>
    </body>
  </html>`;

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto(`data:text/html,${html}`);

    const data = await page.evaluate(() => Array.from(
      document.querySelectorAll('div.bodyCells > div > div > div > div'),
      div => [div.innerText],
    ));

    console.log(data);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

输出：

[
  [ "'1-contains the list of text elements I want to scrape'" ],
  [ "'2-contains the list of text elements I want to scrape'" ],
  [ "'3-contains the list of text elements I want to scrape'" ],
  [ "'4-contains the list of text elements I want to scrape'" ]
]

【讨论】：