кукольный динамик c селектор, возвращающий несколько объектов - PullRequest
Новая
       20

кукольный динамик c селектор, возвращающий несколько объектов

0 голосов
/ 03 апреля 2020

dom tree

Так выглядит мое дерево DOM. Код кукловода, который я использую, выглядит следующим образом. 

  const selector = '[class^="SubscriptionBilling_tierInclusion__"]';
  const nodes = Array.from(await page.$$(selector));
  const nodeList = Array.from(nodes).map(element => element);

В структуре DOM « SubscriptionBilling_tierInclusion __ » повторяется многократно и имеет в себе 3 деления. Все эти элементы имеют имена классов Dynami c, как показано на рисунке.

Мне нужно получить значения этих 3-х элементов (как показано на рисунке в первом блоке - HEADING, DESCRIPTION)

С помощью кода, который я пробовал, я получаю коллекцию элементов, но не знаю, как получить значения дочерних объектов.

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

page.$$ разрешить в массив ElementHandle, поэтому Array.from является избыточным. Вы можете использовать children свойство элемента и получить первые три дочерних innerText следующим образом: 

const values = await page.$$eval('[class^="SubscriptionBilling_tierInclusion__"]', elements => elements.map(el => [...el.children].filter((el, index) => index < 3).map(el => el.innerText)))

Если вам нужны узлы в контексте кукловода, вы можете использовать evaluateHandle .

0 голосов
/ 03 апреля 2020

Вы можете попробовать что-то вроде этого. 

const selector = '[class^="SubscriptionBilling_tierInclusion__"]';
const nodes = document.querySelectorAll(selector); // Replace this JS code with Puppeteer's
const nodeList = Array.from(nodes).map(element => element);
const ChildNodesVal = [];
console.log(nodeList);
nodeList.forEach((e,i)=>
{
    ChildNodesVal[i] = [];
    e.querySelectorAll('div').forEach(child => ChildNodesVal[i].push(child.textContent))
});
console.log(ChildNodesVal);
<div class="SubscriptionBilling_tierInclusion__">
  <div class="first1">1</div>
  <div class="first2">2</div>
  <div class="first3">3</div>
</div>
<div class="SubscriptionBilling_tierInclusion__">
  <div class="first4">4</div>
  <div class="first5">5</div>
  <div class="first6">6</div>
</div>
...