Correspondência de nome do elemento curinga com "querySelector()" e "querySelectorAll()" em JavaScript

Problema:

Consultar um documento XML com elementos que possuem strings específicas incorporadas em seus nomes pode ser um desafio. Embora CSS suporte caracteres curinga para consultas de atributos, a mesma funcionalidade parece estar faltando para nomes de elementos.

Solução:

Infelizmente, não há uma maneira direta de corresponder ao elemento curinga nomes usando "querySelector()" ou "querySelectorAll()". No entanto, existem abordagens alternativas:

• Correspondência de atributos: CSS fornece curingas para valores de atributos. Para combinar elementos com uma string específica em seu nome, procure a presença dessa string em qualquer um de seus atributos usando a seguinte sintaxe:

  • [attribute^='value'] corresponde a elementos cujo atributo começa com 'value'.
  • [attribute$='value'] corresponde a elementos cujo atributo termina com 'value'.
  • [attribute*='value'] corresponde a elementos cujo atributo contém 'value'.
• Atributo de nome: Se você estiver interessado em combinar o atributo 'nome', simplesmente substitua 'id' por 'nome' acima expressions.

Exemplo:

Para encontrar todos os elementos com a string "name" em seu atributo 'name', você pode use:

const elementsWithName = document.querySelectorAll('[name*="name"]');

Nota:

Se você está procurando correspondência de curinga para o próprio nome da tag do elemento, atualmente não há solução direta usando "querySelector()" ou "querySelectorAll()".