Кукловод получает элементы из структуры <dl> - PullRequest
Новая
       17

Кукловод получает элементы из структуры <dl>

1 голос
/ 25 сентября 2019

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

<dl class="foo-bar">
    <dt>Key</dt>
    <dd>Value<dd>
    <dt>Key</dt>
    <dd>Value<dd>
    ....
</dl>

Это то, что я хотел бы сделать в чистом JS: 

let list = document.querySelectorAll('.foo-bar')

let key = list[0].children[0].innerText // would give me "Key"

Этогде я нахожусь: 

let list = await page.evaluate(() => Array.from(document.querySelectorAll('.foo-bar'), element => element))

let key = list[0] //returns empty object ({})

РЕДАКТИРОВАТЬ: мне нужно получить доступ ко всем ключам / значениям dt.Предпочтительно добавлять их к объекту, подобному следующему: 

let object = {
    key1: "key1",
    value1: "value1",
    key2: "key2",
    value2: "value2"
}

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

Ответы [ 3 ]

1 голос
/ 25 сентября 2019

Селектор .foo-bar dt, .foo-bar dd должен получить массив всех элементов <dt> и <dd>, вложенных в <dl class="foo-bar"></dl>. 

const list = await page.evaluate(() => document.querySelectorAll('.foo-bar dt, .foo-bar dd'));

const key = list[0].innerText;

В качестве альтернативы, вы можете использовать $$() метод страницы , что по сути document.querySelectorAll().Вот пример: 

const list = await page.$$('.foo-bar dt, .foo-bar dd');

const key = list[0].innerText;

Вот пример того, как вы можете использовать reduce() в вашем массиве для преобразования его в нужный вам объект: 

// Stubbing the list data for example.
const list = [
  { innerText: 'key1' },
  { innerText: 'value1' },
  { innerText: 'key2' },
  { innerText: 'value2' },
  { innerText: 'key3' },
  { innerText: 'value3' }
]

const test = list.reduce((acc, v, i) => {
  // Map even items as properties and odd items as values to prev property.
  i % 2 === 0 ? acc[v.innerText] = null : acc[list[i-1].innerText] = v.innerText;
  return acc;
}, {});

console.log(test);
0 голосов
/ 25 сентября 2019

Тонкая настройка ответа @Vaviloffs решила проблему!

Я просто создаю массив всех элементов dt и dd с 

let list = await page.evaluate(() => Array.from(document.querySelectorAll('.foo-bar dt, .foo-bar dd'), element => element.textContent))
0 голосов
/ 25 сентября 2019

Если вам нужен только первый dt текст, вы должны запросить его напрямую: 

await page.evaluate(() => document.querySelector('.foo-bar dt').innerText)
...