title: How to optimize native JavaScript code when refactoring it from Jquery
body: <p>I need to rewrite some Jquery into native JavaScript code but I am facing a problem that I am not so sure how to solve.</p>
  <p>This is Jquery code I need to rewrite in native JS:</p>
  <pre><code>$('.class1').click(function () {
    setTimeout(() =&gt; {
      $('.class2').css('top', '252px');
      $('.class3').css('bottom', '0px');
    }, 200);
    $('.class2').css('z-index', '-1');
    $('.class1').css('z-index', '-1');
  }); 
  </code></pre>
  <p>And this is what I have written in native JavaScrip:</p>
  <pre><code>if (document.querySelector('.class1')){
  document.querySelector('.class1').addEventListener('click', function () {
      setTimeout(() =&gt; {
          if (document.querySelector('.class2')) {
              document.querySelector('.class2').style.top = '252px';
          }
          if ( document.querySelector('.class3')) {
              document.querySelector('.class3').style.bottom = '0px';
          }
      }, 200);
      if (document.querySelector('.class2')) {
          document.querySelector('.class2').style.zIndex = '-1';
      }
      if ( document.querySelector('.class1')) {
          document.querySelector('.class1').style.zIndex = '-1';
      }
  })
  }
  </code></pre>
  <p>I was hoping that people could explain to me how to solve two things:<br></p>
  <ol>
  <li>Is there a more elegant way to check for an element on the current page if the code runs on the whole site?<br></li>
  <li>Is there something else that I can replace those if statements inside the function?
  <br>In Jquery those statements are executed one by one but in my case I need to check for an element first and if it is there do something with it.</li>
  </ol>