Interagindo o JavaScript com o HTML com data attributes

1. Encontre seu código
›
2. JavaScript
›
3. Interagindo o JavaScript com o HTML com data attributes

---

Você pode aprender a programar em JavaScript, pode ler diversos tutoriais desse site e artigos, entender bastante da linguagem, descobrir novos comandos e possibilidades, e isso é muito bom.

E para melhorar ainda mais o seu aprendizado, vamos lhe mostrar como interagir o JavaScript com o HTML da página.

Você já viu nesse site alguns tópicos, como por exemplo, resgatar ID’s e classes nas tags html. Mas você sabia que o JavaScript tem a suas tags que podem ser incluídas no DOM 9Document Object Model, o HTML)? Esses atributos são específicos para o JavaScript e não quebram o seu documento HTML em validações como w3c e outros.

Como colocar attributos / referências nas suas tags HTML?

A maneira que você deve fazer, é, colocar atributos com um data-nome_do_atributo.
Exemplo:

<p>Pedidos:</p>
<ul>
 <li id="P1" onclick="showDetails(this)" data-describe="Camisa" data-code="1">Camisa</li>
 <li id="P2" onclick="showDetails(this)" data-describe="Shorte" data-code="2">Shorte</li>
 <li id="P3" onclick="showDetails(this)" data-describe="Luva" data-code="3">3</li>
</ul>

Veja, nós temos 3 itens em uma lista, essa lista foi escrita para representar os itens de um pedido.
Agora, imagine que essa lista, pode mudar a todo momento com a adição ou remoção de algum produto, com isso, nós precisamos manipular os dados dela.
Uma das maneiras de fazer com que os itens que serão usados durante algum efeito ou exclusão da lista, pode ser usando o data attribute.

O Data Attribute é escrito como data-* em qualquer elemento html. Ele serve especificamente para passar dados no HTML que em algum momento serão puxados pelo JavaScript.

Para que serve o Data Attribute?

Como dito, o data attribute serve para passar dados nas tags. Esses dados devem ser setados para facilitar a recuperação de dados para você manipular o DOM.

Data Attribute e SEO

Você pode manipular o DOM de várias maneiras, por exemplo, você pode salvar no seu script alguma referência sobre o script, você também poderia setar algum atributo no elemento HTML com outro nome, mas teriamos os problemas:

• Salvando a referência no próprio script, pode causar uma confusão futura para você entender ele. Isso depende bastante da sua sintaxe e nomes das funções e variáveis.
• Se você setar um atributo que não seja identificado pelo HTML, a sua página não irá passar em validadores de HTML (w3c por exemplo).

Ambas funções são prejudiciais ao SEO, a primeira por que a página irá usar mais memória do que o necessário, a segunda, por que quebra a semântica da página devido a ter setado tags em html com atributos inexistentes.

Para solucionar ambos, utilize os data-attribute.

Recuperando os data attribute

Agora que já setamos nossos data attribute, podemos utiliza-los da seguinte maneira:

• Puxando a tag no JavaScript.
• Puxando o atributo.

Use dataset

Para recuperar o valor do atributo, use o dataset. Exemplo:

<p>Pedidos:</p>
<ul>
 <li id="P1" onclick="showDetails(this)" data-describe="Camisa" data-code="1">Camisa</li>
 <li id="P2" onclick="showDetails(this)" data-describe="Shorte" data-code="2">Shorte</li>
 <li id="P3" onclick="showDetails(this)" data-describe="Luva" data-code="3">3</li>
</ul>

<script>
    //Estamos pedindo para ele selecionar no nosso DOM a tag li com o id#P2
    let pedidoP2Describe = document.querySelector('li#P2').dataset.describe;
</script>

Isso fará com que ele selecione o li com id P2 e recupere o atributo data que é nomeado como describe e atribuir ele a nossa variável pedidoP2Describe.

É bem simples, tudo aquilo que tiver o data-nome_do_attributo , poderá ser selecionado usando o dataset.nome_do_attributo.

Simples né?

Como inserir o data-attribute com o JavaScript?

Você pode inserir o data attribute chamado description com o valor “Facebook” com JavaScript da seguinte maneira:
Imagine que você quer lançar um attributo dentro de uma div com uma class chamada fb-state:

<div class="fb-state"></div>
<script>
    document.querySelector('div.fb-state').dataset.description = "facebook";
</script>

Ou seja, é a mesma coisa de recuperar o valor, porém, usamos o símbolo de = e o valor que desejamos atribuir.

<div class="fb-state"></div>
<script>
    document.querySelector('div.fb-state').setAttribute("data-description","facebook");
</script>

Da maneira acima, você usa a função setAttribute para criar qualquer atributo na nossa tag html, por isso, temos que nomear o data- antes de description. Ou seja:

• dataset é especifico para attributos de referência de dados.
• setAttributo é qualquer atributo com qualquer nome, seja ele um class, ID ou o que você desejar.

É muito simples, você pode testar isso da seguinte maneira, inspecione algum elemento em qualquer página, referencie alguma div com o querySelector e em seguida adicione um atributo a ela com o dataset.

Se você fizer certo, você irá ver o atributo na própria inspeção de código fonte:

Abrimos o console e digitamos:

Veja como nossa tag HTML ficou:

E se desejarmos pegar esse valor, coloque no console:

Bem simples e útil. Logo, agora você já sabe como interagir o seu DOM com atributos no HTML. Isso é bastante utilizado no Vue.js e no React.js.