软文广告成功案例,湖南网站seo优化,阿森纳英超积分,托管公司哪家好在现代的Web开发和爬虫开发中#xff0c;Puppeteer是一个非常强大的工具#xff0c;它可以帮助我们自动化浏览器操作#xff0c;提取页面内容。本文将从初阶到高阶#xff0c;详细介绍如何使用Puppeteer提取页面内容的各种技巧#xff0c;特别关注多层类关系选择器的使用。…
在现代的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[typeapplication/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之力
