ElementHandle クラス
ElementHandle は、ページ内の DOM 要素を表します。
シグネチャ:
export declare abstract class ElementHandle<ElementType extends Node = Element> extends JSHandle<ElementType>
拡張: JSHandle<ElementType>
備考
ElementHandle は、Page.$() メソッドで作成できます。
import puppeteer from 'puppeteer';
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const hrefElement = await page.$('a');
await hrefElement.click();
// ...
})();
ElementHandle は、ハンドルが破棄されない限り、DOM 要素がガベージコレクションされるのを防ぎます。ElementHandle は、元のフレームがナビゲートされると自動的に破棄されます。
ElementHandle インスタンスは、Page.$eval() および Page.evaluate() メソッドの引数として使用できます。
TypeScript を使用している場合、ElementHandle は、ハンドルが保持している要素の型を示すジェネリック引数を取ります。たとえば、<select> 要素へのハンドルがある場合、それを ElementHandle<HTMLSelectElement> として型指定すると、より適切な型チェックが得られます。
このクラスのコンストラクタは内部用としてマークされています。サードパーティのコードは、コンストラクタを直接呼び出したり、`ElementHandle` クラスを拡張するサブクラスを作成したりしないでください。
プロパティ
| プロパティ | 修飾子 | 型 | 説明 |
|---|---|---|---|
| frame | 読み取り専用 | Frame | 現在のハンドルに対応するフレーム。 |
メソッド
| メソッド | 修飾子 | 説明 |
|---|---|---|
| $(selector) | 現在の要素で、指定されたセレクターに一致する要素をクエリします。 | |
| $$(selector) | 現在の要素で、指定されたセレクターに一致するすべての要素をクエリします。 | |
| $$eval(selector, pageFunction, args) | 現在の要素で、指定されたセレクターに一致する要素の配列に対して、指定された関数を 실행します。 指定された関数が Promise を返す場合、このメソッドは Promise が解決されるまで待機します。 | |
| $eval(selector, pageFunction, args) | 現在の要素で、指定されたセレクターに一致する最初の要素に対して、指定された関数を 실행します。 指定された関数が Promise を返す場合、このメソッドは Promise が解決されるまで待機します。 | |
| autofill(data) | 要素がフォーム入力の場合、ElementHandle.autofill() を使用して、フォームがブラウザの自動入力実装と互換性があるかどうかをテストできます。フォームを自動入力できない場合はエラーをスローします。 | |
| boundingBox() | このメソッドは、要素の境界ボックス（メインフレームからの相対位置）を返します。要素がレイアウトの一部ではない 場合（例：`display: none`）、`null` を返します。 | |
| boxModel() | このメソッドは、要素のボックスを返します。要素がレイアウトの一部ではない 場合（例：`display: none`）、`null` を返します。 | |
| click(this, options) | このメソッドは、必要に応じて要素をビューにスクロールし、Page.mouse を使用して要素の中央をクリックします。要素が DOM からデタッチされている場合、メソッドはエラーをスローします。 | |
| clickablePoint(offset) | 特定のオフセットが指定されていない限り、要素内の中間点を返します。 | |
| contentFrame(this) | 要素に関連付けられたフレームがある場合は、それを解決します。HTMLIFrameElements には常に存在します。 | |
| contentFrame() | ||
| drag(this, target) | 要素を指定された要素またはポイントにドラッグします。 | |
| dragAndDrop(this, target, options) | ||
| dragEnter(this, data) | ||
| dragOver(this, data) | ||
| drop(this, element) | 指定された要素を現在の要素にドロップします。 | |
| drop(this, data) | ||
| focus() | 要素に対して focus を呼び出します。 | |
| hover(this) | このメソッドは、必要に応じて要素をビューにスクロールし、Page を使用して要素の中央にホバーします。要素が DOM からデタッチされている場合、メソッドはエラーをスローします. | |
| isHidden() | ElementHandle.waitForSelector() と同じメカニズムを使用して、要素が非表示かどうかを確認します。 | |
| isIntersectingViewport(this, options) | 要素が現在のビューポートに表示されている場合は true に解決されます。要素が SVG の場合、代わりに svg 所有者要素がビューポートにあるかどうかを確認します。https://crbug.com/963246 を参照してください。 | |
| isVisible() | ElementHandle.waitForSelector() と同じメカニズムを使用して、要素が表示されているかどうかを確認します。 | |
| press(key, options) | 要素にフォーカスし、Keyboard.down() と Keyboard.up() を使用します。 | |
| screenshot(options) | このメソッドは、必要に応じて要素をビューにスクロールし、Page.screenshot() を使用して要素のスクリーンショットを撮ります。要素が DOM からデタッチされている場合、メソッドはエラーをスローします。 | |
| screenshot(options) | ||
| scrollIntoView(this) | 自動化プロトコルクライアントを使用するか、element.scrollIntoView を呼び出すことによって、要素をビューにスクロールします。 | |
| select(values) | 指定されたすべてのオプションが選択されると、`change` イベントと `input` イベントをトリガーします。 `selector` に一致する `<select>` 要素がない場合、メソッドはエラーをスローします。 | |
| tap(this) | このメソッドは、必要に応じて要素をビューにスクロールし、Touchscreen.tap() を使用して要素の中央をタップします。要素が DOM からデタッチされている場合、メソッドはエラーをスローします。 | |
| toElement(tagName) | 現在のハンドルを指定された要素タイプに変換します。 | |
| touchEnd(this) | ||
| touchMove(this) | ||
| touchStart(this) | ||
| type(text, options) | 要素にフォーカスし、テキストの各文字に対して `keydown`、`keypress`/`input`、`keyup` イベントを送信します。 `Control` や `ArrowDown` などの特殊キーを押すには、ElementHandle.press() を使用します。 | |
| uploadFile(this, paths) | input 要素 の値を指定されたファイルパスに設定します。 | |
| waitForSelector(selector, options) | 現在の要素に、指定されたセレクターに一致する要素が表示されるまで待機します。 Frame.waitForSelector() とは異なり、このメソッドはナビゲーション間や要素が DOM からデタッチされている場合は機能しません。 |