0

Usando JavaScript puro, realizei a seguinte query:

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

Após usar os itens desse nodeList, eu precisei usar outros elementos que possuíam as tags anteriores e mais uma genérica (como, por exemplo, .nova-classe). Como eu realizo uma query para pegar os itens com essa classe de dentro desse nodeList sem ter que refazer a query inteira e sem usar JQuery?

O que desejo é, mais ou menos, o funcionamento do pseudocódigo abaixo:

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"
4
  • 1
    Você quer verificar se os elementos dentro do NodeList tem a classe nova ou pegar os filhos dos elementos do seu NodeList?
    – ayrton
    13/11/2019 às 19:10
  • verificar quais elementos do NodeList tem a classe nova 13/11/2019 às 19:17
  • mas a parte dos filhos também é interessante, já existem respostas pra essa pergunta? 13/11/2019 às 19:18
  • 1
    Para a parte dos filhos você poderia executar o querySelectorAll em cada item do NodeList. Esse método pode ser usado em qualquer elemento, filtrando apenas os filhos dele
    – ayrton
    13/11/2019 às 21:51

2 Respostas 2

1

Para verificar quais elementos do seu NodeList contém a nova classe você pode usar dois métodos: verificar a lista de classes de cada elemento, ou testar pelo seletor.

Com a lista de classes (classList):

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

Com o seletor:

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

A vantagem do seletor é que você pode testar tanto classes como atributos ou tags, o método matches faz um teste baseado no query selector. Ambos os métodos retornam um Array com os elementos do seu NodeList que contém as classes que você pesquisou.

A sintaxe [...document.querySelector] é necessária porque a classe NodeList não possui o método filter, então a convertemos para um Array.

1

O document.querySelectorAll resulta em um nodeList de todos os elementos condizentes com o seletor utilizado, caso você queria garantir que alguns itens não entrem na sua nodeList, você pode aumentar o nível de especificação utilizando o :not(), no seu exemplo:

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

Caso você queria apenas saber se eles existem no seu nodeList basta utilizar um forEach e observar para cada um dos casos.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .