How to perform a query within a nodeList?

Asked

Viewed 147 times

0

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"
javascript dom
  • 1

    You want to check whether the elements within the Nodelist have the new class or catch the children of the elements of its Nodelist?

  • check which elements of Nodelist have the new class

  • but the children part is also interesting, there are already answers to this question?

  • 1

    For the part of the children you could perform the querySelectorAll on each item of NodeList. This method can be used in any element, filtering only his children

2 answers

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);
})

1


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.

Browser other questions tagged javascript dom

You are not signed in. Login or sign up in order to post.