循环遍历html列表并获取内容。

Question

我正在处理一个具有以下结构的页面。

<section id='famous'>

<li class="list-entry" id="samething">
   <span class="list-item item-type">
      <a href="link-1">Movies</a>
   </span>

   <span class="list-item item-name item-title">
      <a href="link-2"> Title 1</a>
   </span>

   <span class="list-item item-uploaded"> 
      <a href="link-2"> Title 1</a>
   </span>
</li>


<li class="list-entry" id="samething">
   <span class="list-item item-type">
      <a href="link-1">Movies</a>
   </span>

   <span class="list-item item-name item-title">
      <a href="link-2"> Title 1</a>
   </span>

   <span class="list-item item-uploaded"> 
      <a href="link-2"> Title 1</a>
   </span>
</li>



<li class="list-entry" id="samething">
   <span class="list-item item-type">
      <a href="link-1">Movies</a>
   </span>

   <span class="list-item item-name item-title">
      <a href="link-2"> Title 1</a>
   </span>

   <span class="list-item item-uploaded"> 
      <a href="link-2"> Title 1</a>
   </span>
</li>

</section>

到目前为止，这是我的代码。

const puppeteer = require('puppeteer')

const main = async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.goto('link-to-my-website')

  await page.waitForSelector("section[id='famous']");

  // const movies = await page.$$('#famous > li.list-entry');
  // for (let i = 0; i < 2; i++) {
  //   const element = movies[i];
  //   console.log(element);    
  // }

  const movies =  await page.$$('#famous > li.list-entry', el => el.innerText);
  movies.forEach(element => {
    console.log(element);
  });

  await browser.close()
}

main()

现在，我不知道如何将span的内容放入数组中。这样我就可以访问a标记中的链接。救命啊！！

谢谢

Answer 1

根据木偶技师文献，page.$$返回一个ElementHandle数组。这些元素还提供了一些选择方法和评价方法。您应该能够查询所需的子元素。例如：

const movies =  await page.$$('#famous > li.list-entry');
for (const movie of movies) {
    const name = await movie.$eval('.item-name > a', el => el.innerText);
    const itemUploaded = await movie.$eval('.item-uploaded > a', el => el.innerText);
    console.log(name, itemUploaded);
}

Answer 2

我想你可以用一个css选择器来完成这个任务？

​

const $$ = (selector, cb) => new Promise( resolve => 
  resolve([...document.querySelectorAll(selector)].map(cb) ) );

$$("#famous li.list-entry span a", el => el.innerText).then(r => console.log(r));

// or even simpler
$$("#famous a", el => el.innerText).then(r => console.log(r));

<section id='famous'>
  <ul>
    <li class="list-entry" id="samething">
      <span class="list-item item-type">
      <a href="link-1">Movies</a>
   </span>

      <span class="list-item item-name item-title">
      <a href="link-2"> Title 1</a>
   </span>

      <span class="list-item item-uploaded"> 
      <a href="link-2"> Title 2</a>
   </span>
    </li>
    <li class="list-entry" id="samething">
      <span class="list-item item-type">
      <a href="link-1">Movies</a>
   </span>

      <span class="list-item item-name item-title">
      <a href="link-2"> Title 1</a>
   </span>

      <span class="list-item item-uploaded"> 
      <a href="link-2"> Title 2</a>
   </span>
    </li>

    <li class="list-entry" id="samething">
      <span class="list-item item-type">
      <a href="link-1">Movies</a>
   </span>

      <span class="list-item item-name item-title">
      <a href="link-2"> Title 2</a>
   </span>

      <span class="list-item item-uploaded"> 
      <a href="link-2"> Title 1</a>
   </span>
    </li>
  </ul>
</section>

​