使用Puppeteer提取页面内容的技巧

在现代的Web开发和爬虫开发中，Puppeteer是一个非常强大的工具，它可以帮助我们自动化浏览器操作，提取页面内容。本文将从初阶到高阶，详细介绍如何使用Puppeteer提取页面内容的各种技巧，特别关注多层类关系选择器的使用。

初阶技巧

1. 提取单个元素的文本内容

使用page.$和page.evaluate来提取单个元素的文本内容。

const titleElement = await page.$('h1');
const title = await titleElement.getProperty('textContent').then(t => t.jsonValue());
console.log(title);

2. 提取多个元素的文本内容

使用page.$$和page.$$eval来提取多个元素的文本内容。

const spanTexts = await page.$$eval('span', spans => spans.map(span => span.textContent));
console.log(spanTexts);

3. 提取元素的属性

使用page.$和page.evaluate来提取单个元素的属性。

const linkElement = await page.$('a');
const href = await linkElement.getProperty('href').then(h => h.jsonValue());
console.log(href);

4. 提取多个元素的属性

使用page.$$和page.$$eval来提取多个元素的属性。

const links = await page.$$eval('a', links => links.map(link => link.getAttribute('href')));
console.log(links);

中阶技巧

1. 提取嵌套元素的内容

使用page.evaluate来提取嵌套元素的内容。

const nestedData = await page.evaluate(() => {
  const items = document.querySelectorAll('.item');
  return Array.from(items).map(item => ({
    title: item.querySelector('h2').textContent,
    description: item.querySelector('p').textContent
  }));
});
console.log(nestedData);

2. 提取动态加载的内容

使用page.waitForSelector来等待动态加载的内容。

await page.waitForSelector('.dynamic-content');
const dynamicContent = await page.$eval('.dynamic-content', el => el.textContent);
console.log(dynamicContent);

3. 提取页面中的JSON数据

使用page.evaluate来提取页面中的JSON数据。

const jsonData = await page.evaluate(() => {
  const script = document.querySelector('script[type="application/json"]');
  return JSON.parse(script.textContent);
});
console.log(jsonData);

4. 提取页面中的表单数据

使用page.$$eval来提取表单中的数据。

const formData = await page.$$eval('form input', inputs => {
  return inputs.map(input => ({
    name: input.name,
    value: input.value
  }));
});
console.log(formData);

高阶技巧

1. 提取复杂选择器的内容

使用page.$$eval来提取复杂选择器的内容。例如，提取content .top .info:last-child span:last-child的内容。

const complexData = await page.$$eval('.content .top .info:last-child span:last-child', spans => {
  return spans.map(span => ({
    text: span.textContent,
  }));
});
console.log(complexData);

2. 提取页面中的所有数据

使用page.evaluate来提取页面中的所有数据。

const allData = await page.evaluate(() => {
  const data = {};
  document.querySelectorAll('*').forEach(el => {
    if (el.textContent.trim() !== '') {
      data[el.tagName.toLowerCase()] = el.textContent;
    }
  });
  return data;
});
console.log(allData);

3. 提取页面中的所有链接和内容

使用page.$$eval来提取页面中的所有链接和内容。

const linksAndContent = await page.$$eval('a', links => {
  return links.map(link => ({
    href: link.href,
    text: link.textContent
  }));
});
console.log(linksAndContent);

4. 提取页面中的所有图片和内容

使用page.$$eval来提取页面中的所有图片和内容。

const imagesAndContent = await page.$$eval('img', images => {
  return images.map(image => ({
    src: image.src,
    alt: image.alt
  }));
});
console.log(imagesAndContent);

5. 提取页面中的所有表格数据

使用page.$$eval来提取页面中的所有表格数据。

const tableData = await page.$$eval('table', tables => {
  return tables.map(table => {
    const rows = Array.from(table.querySelectorAll('tr'));
    return rows.map(row => {
      const cells = Array.from(row.querySelectorAll('td, th'));
      return cells.map(cell => cell.textContent);
    });
  });
});
console.log(tableData);

6. 提取页面中的所有脚本数据

使用page.$$eval来提取页面中的所有脚本数据。

const scriptData = await page.$$eval('script', scripts => {
  return scripts.map(script => script.textContent);
});
console.log(scriptData);

7. 提取页面中的所有样式数据

使用page.$$eval来提取页面中的所有样式数据。

const styleData = await page.$$eval('style', styles => {
  return styles.map(style => style.textContent);
});
console.log(styleData);

复杂选择器的使用技巧

1. 提取特定类名的最后一个子元素

使用page.$$eval来提取特定类名的最后一个子元素。

const lastChildData = await page.$$eval('.content .top .info:last-child span:last-child', spans => {
  return spans.map(span => ({
    text: span.textContent,
  }));
});
console.log(lastChildData);

2. 提取特定类名的最后一个子元素的属性

使用page.$$eval来提取特定类名的最后一个子元素的属性。

const lastChildAttributes = await page.$$eval('.content .top .info:last-child span:last-child', spans => {
  return spans.map(span => ({
    text: span.textContent,
    className: span.className,
    id: span.id
  }));
});
console.log(lastChildAttributes);

3. 提取特定类名的最后一个子元素的子元素

使用page.$$eval来提取特定类名的最后一个子元素的子元素。

const nestedChildData = await page.$$eval('.content .top .info:last-child span:last-child', spans => {
  return spans.map(span => ({
    text: span.textContent,
    nestedText: Array.from(span.querySelectorAll('span')).map(nestedSpan => nestedSpan.textContent)
  }));
});
console.log(nestedChildData);

4. 提取特定类名的直接子元素

使用page.$$eval来提取特定类名的直接子元素。

const directChildren = await page.$$eval('.content > .top', elements => {
  return elements.map(el => ({
    text: el.textContent,
    className: el.className
  }));
});
console.log(directChildren);

5. 提取特定类名的二代子元素

使用page.$$eval来提取特定类名的二代子元素。

const secondLevelChildren = await page.$$eval('.content .top > .info', elements => {
  return elements.map(el => ({
    text: el.textContent,
    className: el.className
  }));
});
console.log(secondLevelChildren);

6. 提取特定类名的多代子元素

使用page.$$eval来提取特定类名的多代子元素。

const multiLevelChildren = await page.$$eval('.content .top .info span', elements => {
  return elements.map(el => ({
    text: el.textContent,
    className: el.className
  }));
});
console.log(multiLevelChildren);

7. 提取特定类名的多代子元素的属性

使用page.$$eval来提取特定类名的多代子元素的属性。

const multiLevelChildrenAttributes = await page.$$eval('.content .top .info span', elements => {
  return elements.map(el => ({
    text: el.textContent,
    className: el.className,
    id: el.id
  }));
});
console.log(multiLevelChildrenAttributes);

类的层次关系说明

1. 直接子元素选择器 (>)

直接子元素选择器用于选择某个元素的直接子元素。例如，选择.content类下的直接子元素.top：

const directChildren = await page.$$eval('.content > .top', elements => {
  return elements.map(el => ({
    text: el.textContent,
    className: el.className
  }));
});
console.log(directChildren);

2. 二代子元素选择器

二代子元素选择器用于选择某个元素的二代子元素。例如，选择.content类下的二代子元素.info：

const secondLevelChildren = await page.$$eval('.content .top > .info', elements => {
  return elements.map(el => ({
    text: el.textContent,
    className: el.className
  }));
});
console.log(secondLevelChildren);

3. 多代子元素选择器

多代子元素选择器用于选择某个元素的多代子元素。例如，选择.content类下的多代子元素span：

const multiLevelChildren = await page.$$eval('.content .top .info span', elements => {
  return elements.map(el => ({
    text: el.textContent,
    className: el.className
  }));
});
console.log(multiLevelChildren);

4. 多代子元素的属性选择器

多代子元素的属性选择器用于选择某个元素的多代子元素及其属性。例如，选择.content类下的多代子元素span及其属性：

const multiLevelChildrenAttributes = await page.$$eval('.content .top .info span', elements => {
  return elements.map(el => ({
    text: el.textContent,
    className: el.className,
    id: el.id
  }));
});
console.log(multiLevelChildrenAttributes);

总结

从初阶到高阶，这些技巧可以帮助你逐步掌握如何使用Puppeteer提取页面的各种内容。初阶技巧主要集中在基本的元素选择和属性提取上，中阶技巧则涉及到动态内容的等待和嵌套元素的提取，高阶技巧则更加复杂，可以提取页面中的所有数据，包括表格、脚本、样式等。通过这些技巧，你可以应对各种复杂的页面爬取任务。

希望这篇文章对你有所帮助！如果你有任何问题或建议，请随时在评论区留言。

以我之思，借AI之力