Je suis nouveau pour Puppeteer et j'essaye d'obtenir textContent de deux divs utilisant la même classe.
let postInfo = element.querySelector('.post-item-info');
Le résultat que j'attends est de retourner un tableau [3,5]. Mon code actuel est ci-dessous.
<div class="post-item">
<div class="post-item-info">
<span class="post-item-status post-comment"></span>
3
</div>
<div class="post-item-info">
<span class="post-item-status post-vote"></span>
5
</div>
</div>
Le problème est qu'il ne renvoie que le premier. Veuillez me dire comment procéder.
4 Réponses :
Eh bien, il existe une méthode similaire pour cela querySelectorAll ()
const nodes = document.querySelectorAll('.post-item-info')
Array.from(nodes).forEach(node => {
// do stuff with node
})
Obtenez-les comme:
let elements = document.getElementsByClassName('post-item-info')
Il renvoie un tableau et vous pouvez ensuite effectuer une boucle dessus. Vous pouvez également voir cette question Github pour le même cas:
Votre sélecteur doit être comme const nodes = element.querySelectorAll ('. post-item-info'); . Ensuite, pour accéder aux éléments individuels de la collection retournée, utilisez une boucle for traditionnelle comme
for(let i = 0; i < nodes.length; i++){
const currentNode = nodes[i];
// doStuffWith(currentNode);
}
Ou utilisez Array.from pour une manière plus élégante :)
Vrai, ou même plus court, les [... nodes] devraient également fonctionner.
Quelques moyens concis pour obtenir le tableau de ces contenus textuels:
const texts = await page.evaluate(() =>
[...document.querySelectorAll('.post-item-info'')].map(({ innerText }) => innerText));
const texts = await page.$$eval('.post-item-info',
divs => divs.map(({ innerText }) => innerText));