[Dúvida] Data-attribute

Oi Heitor!

Sua pergunta é muito interessante e relevante para entender melhor a manipulação de elementos HTML com JavaScript.

Os data-attributes, classes e ids têm funções diferentes, mas podem ser usados para selecionar elementos no DOM.

• ID: é um identificador único para um elemento HTML. Cada id deve ser único em uma página. IDs são úteis quando você precisa selecionar um único elemento e realizar uma ação específica com ele. Por exemplo, você pode ter um botão com um id específico que, quando clicado, realiza uma ação específica.

• Class: é usada para definir um ou mais elementos que compartilham um estilo comum ou comportamento. As classes são úteis quando você precisa selecionar um grupo de elementos e aplicar a mesma ação a todos eles. Por exemplo, você pode ter uma classe para todos os botões que compartilham o mesmo estilo.

• Data-attribute: são atributos personalizados que você pode adicionar a um elemento HTML. Eles são úteis quando você precisa armazenar informações extras que não têm qualquer efeito visual sobre a página. Por exemplo, você pode ter um data-attribute que armazena a posição de um elemento em um array.

A principal diferença entre eles é que os data-attributes permitem armazenar informações extras, enquanto classes e ids são usados principalmente para estilização e seleção de elementos.

Por exemplo, se você tem uma lista de vídeos e cada vídeo tem um data-attribute que armazena o ID do vídeo, você pode usar esse data-attribute para realizar ações específicas para cada vídeo, como reproduzir o vídeo quando ele é clicado.

Espero ter ajudado e bons estudos!

Olá,

Normalmente data attributes são utilizados para armazenar valores para poder ajudar na leitura do HTML mas não necessariamente irá afetar a visualização da página web. E os acessos desses data attributes no javascript e no css são diferentes entre classes e id's.

Para mais informações recomendo uma leitura da documentação: https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Howto/Use_data_attributes

Obrigado pelas respostas, consegui entender melhor!