哈尔滨开网站个人网站转为企业网站
在现代的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之力