Получить атрибут href в pupeteer Node.js

Question

Получить атрибут href в pupeteer Node.js

В документации jQuery.fn.on есть хорошее объяснение.

Короче:

Обработчики событий привязаны только к выбранные в данный момент элементы; они должны существовать на странице, когда ваш код делает вызов .on().

Таким образом, в следующем примере #dataTable tbody tr должен существовать до генерации кода.
$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});
Если на страницу вводится новый HTML-код, предпочтительнее использовать делегированные события для присоединения обработчика событий, как описано ниже.

Делегированные события имеют то преимущество, что они могут обрабатывать события от элементов потомков, которые будут добавлены в документ позже. Например, если таблица существует, но строки добавляются динамически с использованием кода, следующее будет обрабатывать ее:
$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});
В дополнение к их способности обрабатывать события на дочерних элементах, которые еще не созданы, другим преимуществом делегированных событий является их потенциал для гораздо более низких накладных расходов, когда необходимо контролировать многие элементы. В таблице данных с 1000 строками в tbody первый пример кода прикрепляет обработчик к 1000 элементам.

Подход с делегированными событиями (второй пример кода) прикрепляет обработчик события только к одному элементу , tbody, и событию нужно только выровнять один уровень (от щелчка tr до tbody).

Примечание. Делегированные события не работают для SVG .

1

node.js puppeteer

задан Googlebot 28 March 2019 в 00:28

2 ответа

Другие вопросы по тегам:

node.js puppeteer

Похожие вопросы:

score 0 · Answer 1

await page.$('a') возвращает массив с ElementHandles - это объекты со своим собственным API, специфичным для pupeteer, у них нет обычного DOM API для элементов HTML или узлов DOM. Поэтому вам нужно либо получить атрибуты / свойства в контексте браузера через page.evaluate(), либо использовать довольно сложный API ElementHandles. Это пример с обоими способами:

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('https://example.org/');

    // way 1
    const hrefs1 = await page.evaluate(
      () => Array.from(
        document.querySelectorAll('a[href]'),
        a => a.getAttribute('href')
      )
    );

    // way 2
    const elementHandles = await page.$('a');
    const propertyJsHandles = await Promise.all(
      elementHandles.map(handle => handle.getProperty('href'))
    );
    const hrefs2 = await Promise.all(
      propertyJsHandles.map(handle => handle.jsonValue())
    );

    console.log(hrefs1, hrefs2);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

score 0 · Answer 2

Я не знаю, почему это такая боль, но это было найдено, когда я столкнулся с этим некоторое время назад.

async function getHrefs(page, selector) {
  return await page.$eval(selector, anchors => [].map.call(anchors, a => a.href));
}