title: is it possible to using hasClass() with querySelectorAll()?
body: <p>I just start learning javascript and jquery, I tried to add and remove classes with this code</p>
  <pre><code> if ($(&quot;.head&quot;).hasClass(&quot;collapsed&quot;)) {
    $(&quot;.fas&quot;).addClass(&quot;fa-chevron-down&quot;);
    $(&quot;.fas&quot;).removeClass(&quot;fa-chevron-up&quot;);
   } else {
    $(&quot;.fas&quot;).addClass(&quot;fa-chevron-up&quot;);
    $(&quot;.fas&quot;).removeClass(&quot;fa-chevron-down&quot;);
   }
  </code></pre>
  <p>But the code is to add/remove classes at once to all <code>.head</code> when I click on a particular <code>.head</code> I want to add/remove the classes.</p>
  <p>Also I tried to using querySelectorAll() on code below but appear to be an error with waring messages "jQuery.Deferred exception: x[i].hasClass is not a function TypeError: x[i].hasClass is not a function" and "Uncaught TypeError: x[i].hasClass is not a function"
  <pre><code>var x = document.querySelectorAll(&quot;.head&quot;);
  
  for (var i = 0; i &lt; x.length; i++) {
  
   if (x.hasClass(&quot;collapsed&quot;)) {
    $(&quot;.fas&quot;).addClass(&quot;fa-chevron-down&quot;);
    $(&quot;.fas&quot;).removeClass(&quot;fa-chevron-up&quot;);
   } else {
    $(&quot;.fas&quot;).addClass(&quot;fa-chevron-up&quot;);
    $(&quot;.fas&quot;).removeClass(&quot;fa-chevron-down&quot;);
   }
  }
  
  </code></pre>
  <p>is it not possible to use <code>querySelectorAll()</code> together with <code>hasClass()</code>? <br/>
  if it's possible, how to use it or is there an alternative solution to my issue?</p>
  <p>Thanks in advance!