Obtenha elemento por id parcialmente correspondendo à string usando JavaScript

Páginas da Web com várias funcionalidades geralmente requerem códigos longos. Nesse caso, alocar uma identidade comum ou parte dela para vários elementos auxilia o desenvolvedor em grande parte. Por exemplo, alocando uma parte do ID, que é o mesmo em todos os elementos, para acessá -los ao mesmo tempo. Nesses casos, obter um elemento por id parcialmente correspondendo à string em JavaScript é de grande ajuda para simplificar a complexidade do código.

Este blog discutirá a abordagem para obter elemento por ID, com a string parcialmente correspondente em JavaScript.

Como obter/buscar um elemento por eu ia por string parcialmente correspondente em JavaScript?

O elemento pode ser buscado pelo ID combinando parcialmente a string em JavaScript usando o “documento.QuerySelectorAll ()”Método. Este método busca todos os elementos que correspondem a um (s) seletor (s) CSS e retorna uma lista de nós.

Sintaxe

documento.QuerySelectorAll (seletores)

Na sintaxe acima:

““Seletores”Consulte um ou mais seletores de CSS.

Exemplo 1: Obtenha o elemento combinando parcialmente o ID desde o início

Neste exemplo, o “documento.QuerySelectorAll ()”O método pode ser utilizado para buscar o elemento especificando seu ID da string desde o início e não o ID completo:

Execute as etapas a seguir no snippet de código acima:

• Em primeiro lugar, especifique o “”Elemento especificando sua fonte através do“src”Atributo e o declarado“eu ia”.
• Depois disso, no código JavaScript, acesse o elemento especificado por seu “eu ia”Desde o início, usando o“QuerySelectorAll ()”Método.
• Observe que "^”Combina o começo.
• Finalmente, exiba o elemento buscado por seu ID de string parcial desde o início no console.

Saída

Na saída acima, pode -se observar que o elemento correspondente e seu ID são exibidos no console.

Exemplo 2: Obtenha o elemento combinando parcialmente o ID do fim

Neste exemplo, o “documento.QuerySelectorAll ()”O método pode ser aplicado da mesma forma para obter o elemento correspondendo parcialmente ao ID da string do final:

Implemente as etapas a seguir nas linhas de código acima:

• Lembre -se da abordagem discutida para incluir a imagem com o declarado “eu ia”.
• No código JS, acesse o incluído “”Elemento especificando seu ID do final usando o“QuerySelectorAll ()”Método.
• Observe que o “$”No código corresponde ao ID do final.
• Por fim, exiba o elemento correspondente no console.

Saída

A saída acima indica que o requisito desejado é alcançado.

Exemplo 3: Obtenha o elemento combinando parcialmente o ID contido

Nesta demonstração, o elemento correspondente será buscado correspondendo parcialmente ao ID da string de qualquer uma das posições:

No código acima:

• Da mesma forma, inclua a imagem declarada com o atribuído “eu ia”.
• No código JavaScript, acesse o elemento combinando parcialmente o “eu ia”Tendo o valor de string declarado nele.
• Observe que "*”Combina o ID de qualquer posição.
• Finalmente, exiba o elemento buscado.

Saída

O elemento buscado na saída acima verifica que o especificado “eu ia”É combinado com o ID do elemento de qualquer uma das posições.

Conclusão

O "documento.QuerySelectorAll ()”O método pode ser utilizado para buscar um elemento por seu ID, combinando a string parcialmente usando JavaScript. Este método pode ser implementado para corresponder parcialmente à string contida em um ID do início, final ou de qualquer posição para buscar um elemento. Este tutorial explicou como buscar um elemento por ID combinando uma string parcialmente em javascript.