How to select the next immediate child using querySelector?

user_13786693 0
Viewed 201

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

queryselector puppeteer web-scraping javascript
2 Answers

You should probably select all 'h4' and 'ul' elements into their own collections, identify the current element in these collections and simply pick the following element. Here is a small snippet showing how to find the next <h4>:

const allH4s= [...document.querySelectorAll("h4")];

// assuming a <h4> has been selected:
const firstH4=document.querySelector("h4"),
// then nextH4 will be the immediately following h4 element in the document:
  nextH4=allH4s[allH4s.indexOf(firstH4)+1];

[... collection] creates an Array from a collection. This is necessary, as we need to access the Array-method indexOf().

You can do a similar thing for your <ul>s.

user_26100610

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

user_29519330
Related