1
votes

Le marionnettiste récupère les éléments d'une structure

J'essaye d'obtenir les éléments dans une structure qui ressemble à ceci:

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

Voici ce que j'aimerais faire en pur JS:

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

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

Voici où je suis:

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

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

EDIT: J'ai besoin d'accéder à toutes les clés / valeurs dt . De préférence, les ajouter à un objet comme celui-ci:

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

Je sais que la structure de l'objet n'a pas beaucoup de sens mais ce n'est pas vraiment pertinent.

p >

javascript node.js puppeteer dom-manipulation

0 commentaires

3 Réponses :

0
votes

Si vous n'avez besoin que du premier texte dt , vous devez le demander directement:

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

1 commentaires

Je vois que ma question initiale n'était pas claire, mais que je l'ai mise à jour maintenant. J'ai besoin d'accéder à tous les éléments dt

1
votes

Le sélecteur .foo-bar dt, .foo-bar dd devrait vous donner un tableau de tous les

   code> éléments imbriqués dans   
 . // 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);
  Vous pouvez également utiliser   $$ ()  méthode de page  , qui est essentiellement  document.querySelectorAll () . Voici un exemple: 
 const list = await page.$$('.foo-bar dt, .foo-bar dd');

const key = list[0].innerText;
  Voici un exemple de la façon dont vous pouvez utiliser  reduction ()  sur votre tableau pour le transformer en l'objet dont vous avez besoin:  
 
 

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

const key = list[0].innerText;

0 commentaires

0
votes

L'ajustement de la réponse @Vaviloffs a résolu le problème!

Je crée simplement un tableau de tous les éléments dt et dd avec

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

0 commentaires