使用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);