Чем ElementHandle отличается от элемента DOM? - PullRequest
Новая
       8

Чем ElementHandle отличается от элемента DOM?

0 голосов
/ 09 мая 2018

Документация на page. $ (Селектор) говорит, что возвращает обещание, содержащее ElementHandle.

Но документации по ElementHandle немного не хватает.

Он говорит, что он «представляет элемент DOM», но что это действительно означает? И если он представляет DOM, почему нельзя проверить содержимое ElementHandle?

В нем также говорится: «предотвращает сборку мусора элементом DOM, если дескриптор не расположен». Зачем элементу DOM собирать мусор, если браузер все еще находится на странице?

Это произошло потому, что я думал, что будет просто взять текст из элемента на странице, поэтому я попытался, 

const text = await page.$('#text').textContent;

, который возвратил undefined. Итак, я попытался, 

const text = await page.$('#text').textContent();

, который выдал ошибку.

Оказывается, правильный путь 

const text = await page.evaluate(() => document.querySelector('#text').textContent);

1 Ответ

0 голосов
/ 09 мая 2018

С ElementHandle вы можете по-прежнему иметь доступ к таким свойствам, как textContent, но "Путь Кукольника". Сначала вы должны .getProperty() на ElementHandle, а затем преобразовать его в .jsonValue(). Помните, что все эти операции возвращают поромы, поэтому вы должны await на всех них так: 

await (await (await page.$('#text')).getProperty('textContent')).jsonValue();

Вот полный рабочий пример: 

const puppeteer = require('puppeteer');

const html = `
<html>
  <body>
    <div id="text">Sample content</div>
  </body>
</html>`;

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`data:text/html,${html}`);

  const text = await page.evaluate(() => document.querySelector('#text').textContent);
  const text2 = await (await (await page.$('#text')).getProperty('textContent')).jsonValue();

  console.log(text);
  console.log(text2);

  await browser.close();
})();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...