title: Why does querySelectorAll('div') return a list of HTMLDivElement but querySelectorAll('div.className') returns a list of Element in TypeScript
body: <p>I am wondering why is it that when you put a class name to querySelectorAll the type is no longer appearing as HTMLDivElement.</p>
  <pre><code>document.querySelectorAll('div').forEach(item =&gt; {
      // item type is HTMLDivElement
  });
  
  document.querySelectorAll('div.className').forEach(item =&gt; {
      // item type is Element not HTMLDivElement
  });
  </code></pre>
  <p>This means that if I want to change the style it gives an error:</p>
  <pre><code>document.querySelectorAll('div').forEach(item =&gt; {
      item.style.display = 'none';
  });
  
  document.querySelectorAll('div.className').forEach(item =&gt; {
      item.style.display = 'none'; // TS2339: Property 'style' does not exist on type 'Element'.
  });
  </code></pre>
  <p>I have found a few ways around this (below), but I am curious why it is even necessary.</p>
  <pre><code>// Cast all items in NodeList to HTMLDivElement type
  document.querySelectorAll&lt;HTMLDivElement&gt;('div.className').forEach(item =&gt; {
      item.style.display = 'none';
  });
  
  // Cast current item to HTMLDivElement type
  document.querySelectorAll('div.className').forEach(item =&gt; {
      (item as HTMLDivElement).style.display = 'none';
  });
  
  // Only change style.display if instanceof HTMLDivElement
  document.querySelectorAll('div.className').forEach(item =&gt; {
      if (item instanceof HTMLDivElement) item.style.display = 'none';
  });
  </code></pre>