如何刮里面 <div> 列出人偶

Question

我正在尋找一種方法來使用puppeteer有效地抓取以以下方式格式化的信息。 假設我在網站上列出了以下內容：

<div id="list">
  <div class="item" pos="0"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 1 </div>
  </div>
  <div class="item" pos="1"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 2 </div>
  </div>
  <div class="item" pos="2"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 3 </div>
  </div>
</div>

如何檢索名稱（名稱1，名稱2和名稱3）的信息？

我曾嘗試將它們裝配到一個對象中，然后再裝配成一個數組，但是對於如何實現它，我仍然感到困惑。

const listOfStuff = document.getElementById('list').getElementsByClassName('itemResult')

Answer 1

我認為與puppeteer API無關。 在現代瀏覽器（ES6）上，轉換為數組很簡單，然后只需映射它即可。 注意，我假設nameToRetrieve僅出現在您要檢索的內容中，因此無需獲取"list" 。

 var names = Array.from(document.getElementsByClassName("nameToRetrieve")).map(x => x.innerHTML); console.log(names) 

 <div id="list"> <div class="item" pos="0"> <a href="www.somewebsite.com"> <div class="nameToRetrieve"> Name 1 </div> </div> <div class="item" pos="1"> <a href="www.somewebsite.com"> <div class="nameToRetrieve"> Name 2 </div> </div> <div class="item" pos="2"> <a href="www.somewebsite.com"> <div class="nameToRetrieve"> Name 3 </div> </div> </div> 

Answer 2

在puppeteer中有一個特殊的便捷方法page.$$eval用於此任務：

let result = await page.$$eval('.nameToRetrieve', names => names.map(name => name.textContent));
console.log(result);

此方法在頁面內運行Array.from（document.querySelectorAll（selector））並將其作為第一個參數傳遞給pageFunction。

結果將是：

[ ' Name 1 ', ' Name 2 ', ' Name 3 ' ]