Selecting a div within a class with Puppeeter

Question

hi im trying to select a given div with in a class. The html is set up like so:

<div class="items">
    <div>fist div</div>
    <div>second div</div>
    <div>third div</div>
</div>
<div class="items">
    <div>fist div two</div>
    <div>second div two</div>
    <div>third div two</div>
</div>
<div class="items">
    <div>fist div three</div>
    <div>second div three</div>
    <div>third div three</div>
</div>

my script is like this:

  let info = await page.evaluate(() => {
    let data = [];
    let elements = document.getElementsByClassName("items");
    let yr = elements[0].getElementsByTagName("div");
    for (var i of yr) {
      data.push(i.textContent);
    }
    return data;
  });

this returns all the divs inn ann array like so

["fist div"],["second div"],["third div"]

what im trying to achive is to get all the divs inn all the classes. so it would look like:

[
["fist div"],["second div"],["third div"],
["fist div two"],["second div two"],["third div two"],
["fist div three"],["second div three"],["third div three"],
]

i was making a foor loop but i cant seem to ge it to work. any ideas?

I would see the second answer from this question. https://stackoverflow.com/a/60733311/15410 — Rippo, Jan 05 '21 at 09:45

Christian Fritz · Accepted Answer · 2021-01-05T00:23:19.627

1

Well, you'll need two loops:

  let info = await page.evaluate(() => {
    let data = [];
    let elements = document.getElementsByClassName("items");
    for (var j in elements) {
      let yr = elements[j].getElementsByTagName("div");
      for (var i of yr) {
        data.push(i.textContent);
      }
    }
    return data;
  });

or, more readably:

let info = await page.evaluate(() => {
  let data = [];
  document.getElementsByClassName("items").forEach(e =>
    e.getElementsByTagName("div").forEach(i => data.push(i.textContent))
  );
});

edited Jan 05 '21 at 00:23

answered Jan 05 '21 at 00:14

Christian Fritz

20,641
3
42
71

i get this error: Evaluation failed: TypeError: elements[j].getElementsByTagName is not a function – Adam Baser Jan 05 '21 at 00:58

score 1 · Answer 2 · answered Jan 05 '21 at 00:23

just add for loop and get the length to get all elements, when you use elements[0] you just get the first <div class="items">

 let info = await page.evaluate(() => { let data = [];
    let elements = document.getElementsByClassName("items");
    for(let x=0;x<elements.length;x++){  
        let yr = elements[x].getElementsByTagName("div");
    for (var i of yr) {
      data.push(i.textContent);
    }
    }
      
    return data;
  });

Selecting a div within a class with Puppeeter

2 Answers2