在这里插入图片描述

在现代的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);