How to target specific span tag in HTML using JS

Question

Hi I have an HTML with several HTML and only a couple of span tags that I want to be fading.

I have selected all the spans:

const spans = document.querySelectorAll("span");
const animation = function () {
  for (let span of spans) span.classList.toggle("fade");
};
setInterval(animation, 2400);

Now I only want to target these 2 spans inside div

<div class="animated">
  Hey, I'm<br>
  <span
    class="color-primary mt-5 fade" 
    id="animated-name" 
    style="margin-top: 20px;"
  >
    Name Name
  </span>
  <span 
    class="color-primary mt-5" 
    id="animated-text" 
    style="margin-top: 20px;"
  >
    Text Text 
    <br> 
    Text & Text
  </span>
</div>

My question is how to target only these 2 span tags to toggle fade?

Answer 1

why not use document.querySelectorAll('div.animated > span')?

Answer 2

querySelectorAll('div.className span')

Or

querySelectorAll('span')[0] //Array span length