Utilizando query Selector do Javascript

Olá, tudo bem?!

Quantas vezes utilizamos bibliotecas como JQuery para ações básicas com Javascript? Eu mesmo por diversas vezes, acabamos tomando essa ação por falta de conhecimento.

Por exemplo, para selecionar algum elemento no HTML um exemplo prático seria utilizar o $('elemento') do JQuery e a partir disso manipular o elemento. Entretanto, podemos fazer esta ação de forma nativa utilizando document.querySelector('elemento').

Vamos para um exemplo prático, abaixo temos um página HTML com um botão, no qual desejamos inserir um atributo data-value="Valor do atributo".

Crie um arquivo HTML contendo a estrutura acima, pode utilizar o nome e o navegador de sua preferência. Como observado, dispomos de um botão com uma classe definida, não necessariamente devemos utilizar class, podemos utilizar a tag ou id, entretanto foi uma escolha utilizar.

Para selecionar o elemento podemos realizar da seguinte maneira;

Ao analisar o retorno na aba console, obtemos o seguinte resultado.

Para inclusão do atributo, será utilizado o comando .setAttribute(key, value).

Após implementação pressione a tecla F5 para atualizar a página e visualizar o resultado no console.

Podemos observar na imagem acima, o resultado da implementação para inclusão do atributo. Outra possibilidade é de coletar o valor de atributos a partir do mesmo elemento, para isso pode-se utilizar button.getAttribute(atributo));.

Foi muito simples a manipulação do elemento, inserindo e coletando valores de atributos. O exemplo foi básico, para demonstrar como é simples e rápido sem a necessidade de um componente ou framework para realizar a ação.

Agradeço pela atenção de todos, espero que o post agregue valor em seu dia a dia.

Grande abraço e sucesso em seus projetos.

2 comentários sobre “Utilizando query Selector do Javascript”

    1. Olá, Cleberson.

      Fico feliz que tenha apreciado o conteúdo, por favor compartilhe com seus amigos para que mais pessoas possam aprender mais sobre javascrit.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *