How can I select all child elements with a certain class using querySelector in JavaScript regardless of the order they appear in HTML?

I can see some issues with your code, so here's an explanation.

First, here's my own way of writing your <script> to hopefully make it easier to understand. You don't have to structure it this way if you don't want to. This block changes nothing of what your code does.

function queryButton(filter) {

  let feedDiv = document.querySelector("div.cpFeed"), // Get's the first <div> with a class of cpFeed
      cardDiv = feedDiv.querySelectorAll("div.card-news"), // Get's all <div> children of feedDiv with a class of card-news
      unnamedDiv, // pre-sets to a variable to undefined
      i, // pre-sets to a variable to undefined
      txtValue // pre-sets to a variable to undefined

  for (i = 0; i < cardDiv.length; i++) { // Sets a previously undefined variable to 0, to be looped through

    unnamedDiv = cardDiv[i].querySelector(".d-none") // Gets first of any element, child of the indexed (i) cardDiv, with a class d-none

    [0] // Does nothing

    txtValue = unnamedDiv.textContent || div.div.innerHTML // returns unnamedDiv.textContent if unnamedDiv.textContent is not undefined. Otherwise, returns div.div.innerHTML, which is not assigned, so it will error out.

    // Returned error from div.div.innerHTML:
    // Uncaught ReferenceError: div is not defined
    // at queryButton (example.html:56:44)
    // at HTMLButtonElement.onclick (example.html:5:45)

    if (txtValue.toUpperCase().indexOf(filter) > -1) { // Checks whether an uppercase string's index of the filter param is greater than -1

      cardDiv[i].style.display = "" // Sets the indexed (i) cardDiv's display to empty / it's default value.

    } else {

      cardDiv[i].style.display = "none" // Sets the indexed (i) cardDiv's display to "none"

    }
  }
}

Hopefully just from the comments above, you'll be able to work out your errors, in your own way.

Of course, if you want to just have a working example, here's me actually making the script work.

function queryButton(filter) {

  // Switched to const since these variable will not be changed
  const feedDiv = document.querySelector(".cpFeed"), // Get's the first of any element with a class of cpFeed
        cardDivs = feedDiv.querySelectorAll(".card-news") // Get's all of any element, children of feedDiv, with a class of card-news
        // unnamedDiv, – Removed to be assigned per cardDiv later
        // i, – Removed because for loop is swtiched to forEach()
        // txtValue – Removed to be assigned per cardDiv later

  // New forEach() instead of for loop
  cardDivs?.forEach((cardDiv) => {
    
    // Adding variables as const since they do not change
    const unnamedDivs = cardDiv.querySelectorAll(".d-none") // Gets all of any element, child of the the current cardDiv, with a class d-none
    
    let display = "none" // preset to none
    
    unnamedDivs?.forEach((unnamedDiv) => {
      
      // Checks whether display has already succeeded in one of the unnamedDivs
      if (display !== "none") display = unnamedDiv.textContent.toUpperCase() === filter ? "" : "none"

      // Always returns something
      cardDiv.style.display = display

    })
  })
}

As you can see, there are a few things I did here that simplify the code, making it more readable, and add some safety checks, so we avoid as many errors as possible.

I also noticed a couple errors in your HTML:

<!-- Two class attributes will break things -->
<!-- BEFORE: <div class="card-news" class="d-none"> -->
<div class="card-news">
      
  <div style="display: none;" class="d-none">Employee</div>
      
  <div style="display: none;" class="d-none">Seasonal</div>
      
  <div>Christina</div>
      
</div>
    
<!-- Two class attributes will break things -->
<!-- BEFORE: <div class="card-news" class="d-none"> -->
<div class="card-news">
      
  <div style="display: none;" class="d-none">Part Time</div>
      
  <div style="display: none;" class="d-none">Employee</div>
      
  <div>Cindy</div>
      
</div>

I also made a CodePen so you can see it in action: Go to CodePen