Javascript use queryselectorall with multiple conditions

by

In this tutorial you will learn how to use multiple conditions with querySelectorAll using Javascript.

In javascript to use multiple conditions with the querySelectorAll method, pass multiple, comma-separated selectors to the method. The method will return a NodeList that contains the elements that match the specified group of selectors.

HTML Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
    <span class="div3">Div 3</span>
    <p class="div4">Div 4</p>
    <span id="div5">Div 5</span>
    <button id="button1">Button 1</span>
  </body>
</html>

Js Code:

<script>
  const elements1 = document.querySelectorAll('div.div1, p.div4');
  console.log(elements1); // [div.div1, p.div4]

  const elements2 = document.querySelectorAll('div, span, button');
  console.log(elements2); // [div.div1, div.div2, span.span, button.button1]

  const elements3 = document.querySelectorAll('div.div1, span#span');
  console.log(elements3); //[div.div1, span#span]
</script>