Como obter elemento por atributo em javascript

Enquanto desenvolvem sites, existem algumas situações em que programadores/desenvolvedores precisam obter os elementos em JavaScript usando seus atributos atribuídos como “eu ia","aula", e assim por diante. Para fazer isso, use o javascript “QuerySelector ()”Método.

Este tutorial explicará o processo para obter o elemento HTML por atributo usando JavaScript.

Como obter elemento por atributo em javascript?

Para obter um elemento por atributo, o “QuerySelector ()”O método é usado. Ele retorna o primeiro elemento do documento que corresponde ao atributo específico. Este método seleciona uma tag específica com um valor de atributo específico. Os parâmetros que precisam ser passados ​​são os “Tagid","aula", e assim por diante.

Sintaxe
Use a sintaxe abaixo mencionada para obter o elemento por atributo:

documento.QuerySelector ("[myAttribute = value]");

Na sintaxe acima, passe o atributo com seu valor atribuído como um parâmetro.

Exemplo
No arquivo html, primeiro, crie um “div”Elemento usando a tag e atribua um id“Divida”Para isso. Crie um botão dentro do elemento div e anexe um “ONCLICK”Evento que acionará o“getElement ()”Método para obter o elemento:

Clique para obter elemento


Clique

Para modelar a div, usaremos as linhas de código abaixo:

#divid
preenchimento: 10px;
Altura: 100px;
Largura: 200px;
margem: automático;
Background-Color: rosa;

A saída correspondente será a seguinte:

No arquivo JavaScript, defina uma função “getElement ()”Isso acionará enquanto o botão é clicado. Ligar para "QuerySelector ()”Método e passe o atributo“eu ia”E seu valor“Divida”Como argumento e armazenam o elemento resultante em uma variável“elemento”:

function getElement ()
var elemento = documento.QuerySelector ('[id = "divid"]');
alerta (elemento);

A saída dada mostra que o atributo “Divida”Pertence a um elemento“div”:

Se você quiser ver todos os elementos dentro do elemento específico, em vez de chamar o método alert (), use o “console.registro()”Método que mostrará o elemento, incluindo seus elementos filhos.

function getElement ()
var elemento = documento.QuerySelector ('[id = "divid"]');
console.log (elemento);

Saída

O gif acima mostra o html “div”Elemento que tem um atributo com o valor“Divida”, Com seus elementos filhos no console clicando no botão.

Conclusão

Para obter um elemento por atributo, use o JavaScript predefinido “QuerySelector ()”Método. É usado para selecionar uma tag específica com um valor de atributo específico. Este tutorial explica o processo para obter o elemento HTML por atributo usando JavaScript.