Need to target a div in js but query selector giving null even the div is present on inspect but that is coming from a jquery library I am using

I am trying to target a div in plain javascript code but querySelector is giving null because it is not present in hard coded i.e. my written code in HTML but it is coming from flickity plugin but I need to perform some other logics by targeting its div inside the javascript.

My Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Icon slider</title>
  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css" />
</head>

<body>
  
    <div class="icons" style="display: flex">
     
      <div class="carousel" style="position: relative; width: 400px; padding: 20px" data-flickity='{
          "freeScroll": true, "contain": true, "prevNextButtons": false,
          "pageDots": false }'>
        <div class="iconContainer carousel-cell iconContainer2">
          <label class="icon icon2" for="heart">❤️</label>
        </div>
        <div class="iconContainer carousel-cell iconContainer3">
          <label class="icon icon3" for="fire">🔥</label>
        </div>
        <div class="iconContainer carousel-cell iconContainer4">
          <label class="icon icon4" for="rocket">🚀</label>
        </div>
        <div class="iconContainer carousel-cell iconContainer5">
          <label class="icon icon5" for="allien">👽</label>
        </div>
      </div>
    </div>

    </div>
  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
  <script>
    const el = document.querySelector(".flickity-slider");

    console.log(el);
  </script>
</body>

</html>

Solution

The element is not there yet when your code runs.

An easy fix is to use setTimeout

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Icon slider</title>
  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css" />
</head>

<body>

  <div class="icons" style="display: flex">

    <div class="carousel" style="position: relative; width: 400px; padding: 20px" data-flickity='{
          "freeScroll": true, "contain": true, "prevNextButtons": false,
          "pageDots": false }'>
      <div class="iconContainer carousel-cell iconContainer2">
        <label class="icon icon2" for="heart">❤️</label>
      </div>
      <div class="iconContainer carousel-cell iconContainer3">
        <label class="icon icon3" for="fire">🔥</label>
      </div>
      <div class="iconContainer carousel-cell iconContainer4">
        <label class="icon icon4" for="rocket">🚀</label>
      </div>
      <div class="iconContainer carousel-cell iconContainer5">
        <label class="icon icon5" for="allien">👽</label>
      </div>
    </div>
  </div>

  </div>
  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
  <script>
    setTimeout(() => {
      const el = document.querySelector(".flickity-slider");
      console.log(el);
    }, 500)
  </script>
</body>

</html>

MutationObserver will be even better

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Icon slider</title>
  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css" />
</head>

<body>

  <div class="icons" style="display: flex">

    <div class="carousel" style="position: relative; width: 400px; padding: 20px" data-flickity='{
          "freeScroll": true, "contain": true, "prevNextButtons": false,
          "pageDots": false }'>
      <div class="iconContainer carousel-cell iconContainer2">
        <label class="icon icon2" for="heart">❤️</label>
      </div>
      <div class="iconContainer carousel-cell iconContainer3">
        <label class="icon icon3" for="fire">🔥</label>
      </div>
      <div class="iconContainer carousel-cell iconContainer4">
        <label class="icon icon4" for="rocket">🚀</label>
      </div>
      <div class="iconContainer carousel-cell iconContainer5">
        <label class="icon icon5" for="allien">👽</label>
      </div>
    </div>
  </div>

  </div>
  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
  <script>
    const targetNode = document.querySelector(".carousel");
    const config = {
      attributes: true,
    };

    const callback = (mutationList, observer) => {
      const el = document.querySelector(".flickity-slider");
      console.log(el)
      observer.disconnect();
    };

    const observer = new MutationObserver(callback);

    observer.observe(targetNode, config);
  </script>
</body>

</html>