How to perform a query within a nodeList?

Question

Using pure Javascript, I performed the following query:

let elems = document.querySelectorAll("a.menu-item, span.menu-item");

After using the items of this nodeList, i needed to use other elements that had previous tags and more a generic (like, for example, .nova-classe). How do I perform a query to get the items with this class from within this nodeList without having to redo the entire query and without using JQuery?

What I want is, more or less, the functioning of the pseudocode below:

var elem = documento.pesquisa("a.menu-item, span.menu-item")

// uso do nodeList "elem"

elem = elem.pesquisa(".nova-classe")

// uso do nodeList "elem"

elem = elem.pesquisa(".outros-elementos")

// uso do nodeList "elem"

Answer 1

The document.querySelectorAll results in a nodeList of all elements matching the selector used, if you wanted to ensure that some items do not enter your nodeList, you can increase the level of specification using the :not(), in his case:

document.querySelectorAll("a.menu-item:not('.nova-classe'):not('.outros-elementos'), span.menu-item:not('.nova-classe'):not('.outros-elementos')").

In case you just wanted to know if they exist in your nodeList just use a foreach and observe for each of the cases.

var elementList = documento.pesquisa("a.menu-item, span.menu-item");
elementList.forEach(element => {
    // se possui uma id
    console.log(element.id == 'novo-id');
    // se possui uma classe
    console.log(element.classList.contains('.nova-classe'));
    // se possui uma atributo
    console.log(element.hasAttribute('value'));
    // se possui uma atributo e valor
    console.log(element.getAttribute('value') == 10);
})

Answer 2

To verify which elements of its NodeList contains the new class you can use two methods: check the list of classes of each element, or test by selector.

With the list of classes (classList):

var elem = [...document.querySelectorAll("a.menu-item, span.menu-item")].filter((item) => {
    return item.classList.contains("nova-classe");
});

With the dial:

var elem = [...document.querySelectorAll("a.menu-item, span.menu-item")].filter((item) => {
    return item.matches(".nova-classe");
});

The advantage of the selector is that you can test both classes and attributes or tags, the method matches makes a test based on the query selector. Both methods return an Array with the elements of your NodeList which contains the classes you searched for.

The syntax [...document.querySelector] is necessary because the class NodeList does not have the method filter, then we convert it to an Array.