使用 Puppeeter 在 class 中选择一个 div

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?

Answer 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))
  );
});

Answer 2

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;
  });