[要素]人形の取得（B）

一つは、関係する知識のポイント

CSSセレクタを使用する方法
共通の要素が取得します
$エレメント選択
タイプ（API入力）
クリック（APIクリック）

第二に、学習ウェブサイト

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

第三に、環境

ノードJS
人形遣い
エディタvscode

第四に、例

- 共通セレクタ要素

セレクタ	例	説明
IDセレクタ	#ID	ID照合が一つだけあり、要素を選択します
クラスセレクタ	。クラス	クラスに一致しながら、複数の要素
属性セレクタ	DIV [可能性]	マッチング特性は関係なく、自分の価値を、ATTRを持っています
属性セレクタ	DIV [ATTR = '122']	一致する属性122の値を有するATTR
子孫セレクタ	divのスパン	子孫セレクタは、スペースとスパンのdivで区切られ、後続のすべてのdiv spanタグと一致します
子要素セレクタ	div>のスパン	サブエレメントセレクタ結局スパン、DIVにマッチ
マッチnは親要素の番目の要素	DIV：n番目の子（2）	親要素の第2マッチング部材

1. IDセレクタ

URLの例：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')});