【PUPPETEER】初探之元素獲取（二）

1、涉及的知識點

1. 如何使用css selector
2. 經常使用元素獲取
3. $ 元素選擇
4. type （api 輸入）
5. click (api 點擊)

2、學習網址

• https://github.com/GoogleChrome/puppeteer/blob/v1.19.0/docs/api.md

3、環境

• node js
• puppeteer
• 編輯器 vscode 

4、實例

         -- 經常使用元素選擇器

選擇器	示例	解釋
id選擇器	#id	選擇匹配id的元素，僅存在一個
class選擇器	.class	同時匹配多個class 元素
屬性選擇器	div[attr]	匹配具備attr的屬性，不考慮他的值
屬性選擇器	div[attr='122']	匹配具備attr的屬性，值爲122
後代選擇器	div span	後代選擇器，匹配全部div 後面的span標籤，div 與 span之間用空格隔開
子元素選擇器	div > span	子元素選擇器，匹配div 後全部的span
匹配父元素下的第n個子元素	div:nth-child(2)	匹配父元素下的第2個元素

1. id 選擇器

實例網址：https://www.cnblogs.com/

代碼演示：

const puppeteer = require('puppeteer');
(async () => {
    const brower = await puppeteer.launch({
        executablePath:'D:\\wangxiao\\chrome-win\\chrome-win\\chrome.exe',
        headless:false
    });
    const page = await brower.newPage();
    await page.goto('https://www.cnblogs.com/');
    const input = await page.$('#zzk_q');
    input.type('12222');
    //await brower.close();
})().catch(error =>{console.log('error')});

2.nth-child(n) 靈活運用  

這裏不一一演示了，演示主要的，好比子級，如圖，咱們想登入，可是登入沒有id,也沒有class, 那咱們試試其餘方式，往父級看，

 

 

有惟一id = 'span_userinfo' ,那麼咱們能夠手寫成

獲取全部的a標籤 - > 

　　　　element  = '#span_userinfo a'  

獲取登入的超級連接

　　　　element = '#span_userinfo a:nth-child(1)'

咱們代碼驗證一下對不對

const puppeteer = require('puppeteer');
(async () => {
    const brower = await puppeteer.launch({
        executablePath:'D:\\wangxiao\\chrome-win\\chrome-win\\chrome.exe',
        headless:false
    });
    const page = await brower.newPage();
    await page.goto('https://www.cnblogs.com/');
    await page.click('#span_userinfo a:nth-child(1)')
    //await brower.close();
})().catch(error =>{console.log('error')});

　

5、學會css Selector

步驟：

1.打開瀏覽器開發者工具(F12)

2.在瀏覽器的Console窗口中使用document.querySelectorAll調試你的css選擇器