Encontre um elemento no DOM com base em um valor de atributo

Em várias situações, pode ser necessário encontrar um elemento no DOM com base em um valor de atributo para aplicar qualquer estilo ou qualquer outra funcionalidade. Por exemplo, enquanto trabalha com páginas da web grandes ou complexas ou selecionando um elemento específico com base em seus atributos para estilo ou manipular. Ajuda a trabalhar com mais eficiência e eficiência com páginas da web.

Este tutorial descreverá o procedimento para encontrar o elemento DOM com base em qualquer valor de atributo.

Como encontrar/recuperar um elemento no DOM com base em um valor de atributo?

Para encontrar o elemento no DOM com base em um valor de atributo, utilize o “QuerySelector ()”Método. Ele fornece o primeiro elemento encontrado no documento que corresponde ao valor seletor de CSS fornecido.

Observação: Para obter todos os elementos que correspondem ao valor seletor especificado, use o “QuerySelectorAll ()”Método.

Sintaxe

Para usar o método "QuerySelector ()", utilize a seguinte sintaxe:

documento.QuerySelector (seletor);

Aqui, o seletor será um ID ou classe como “#eu ia",".aula”:

Você também pode usar a sintaxe fornecida para encontrar o elemento com base no valor do atributo:

documento.QuerySelector ("[seletor = 'value']");

Na sintaxe acima, “Seletor" vai ser "eu ia" ou "aula", ou o "valor" vai ser "idname" ou "nome da classe”.

Exemplo

Em um arquivo html, crie um elemento div que contém um título usando elemento H4, um texto simples usando tag e uma div para uma mensagem com id atribuído “mensagem”:

Encontre um elemento no DOM com base em um valor de atributo

= "Bem -vindo"> Bem -vindo ao Linuxhint

Olá, pessoal! Bem -vindo nos tutoriais do JavaScript Linuxhint

A página será a seguinte:

Agora, vamos conseguir o elemento onde o id “mensagem”É atribuído usando o“QuerySelector ()”Método:

var elemento = documento.QuerySelector ('#mensagem')

Finalmente, imprima o elemento no console:

console.log (elemento);

Na saída, o “div”O elemento é mostrado com seu ID atribuído“mensagem”, Que indica que o elemento necessário foi recuperado com sucesso:

Você também pode obter o elemento usando a sintaxe dada. Aqui, teremos o elemento cujo id é “msg”:

var elemento = documento.QuerySelector ("[id = 'msg']");

Saída

Agora, atualize a cor dele usando o “estilo" propriedade:

elemento.estilo.color = "azul";

Como você pode ver, o texto estava em “verde”Cor, e agora foi atualizada para“azul”:

Isso se trata de encontrar um elemento em um DOM baseado em um valor de atributo.

Conclusão

Para encontrar um elemento no DOM com base em um valor de atributo, utilize o “QuerySelector ()”Método que fornece o primeiro elemento no documento que corresponde ao valor de seletor CSS especificado. Além disso, para obter todos os elementos que correspondem ao valor seletor especificado, use o “QuerySelectorAll ()”Método. Este tutorial descreveu o procedimento para encontrar o elemento DOM com base em qualquer valor de atributo.