Search code examples
javascriptweb-scrapingpuppeteerqueryselector

How to select the next immediate child using querySelector?

I want to loop through a div and store the <h4> and <ul> inside an object. And I already used querySelectorAll but that will select all h4 or ul elements.

In the picture you can see I'm selecting the immediate <h4> and <ul> child, likewise I want to select the next <h4> and <ul> elements and store it in an object.

console

Solution

  • You can still use querySelectorAll and choose the correct index (next will be index 1)

    document.querySelectorAll('#main > ul')[1]
document.querySelectorAll('#main > h4')[1]

    Example proof of IMDB web

    const secondH4 = document.querySelectorAll('#main > h4')[1]
const secondUL = document.querySelectorAll('#main > ul')[1]

console.log(secondH4, secondUL)
    <div id="main">
  <h4>11 August 2020</h4>
  <ul>
    <li>
      <a href="/title/tt4523530/?ref_=rlm">Valley of the Gods</a> (2019)
    </li>
  </ul>
  <h4>14 August 2020</h4>
  <ul>
    <li>
      <a href="/title/tt11394332/?ref_=rlm">Spree</a> (2020)
    </li>
    <li>
      <a href="/title/tt5723282/?ref_=rlm">Endless</a> (2020)
    </li>
    <li>
      <a href="/title/tt5617312/?ref_=rlm">The Bay of Silence</a> (2020)
    </li>
  </ul>
</div>

    NOTE

    By using nextSibling you'd need more logic since nextSibling does not select the next h4 or next ul it selects whatever DOM element is next to the current one