O propósito deste post no blog é esclarecer alguma confusão ao usar o atributo de dados em Javascript. Como um estudante de engenharia de software, às vezes o mundo do bootcamp e o mundo real parecem intimamente relacionados, mas galáxias à parte. Durante uma de nossas palestras estávamos modificando as aulas e adicionando ids diretamente em html e um aluno mencionou que não era particularmente sábio modificar essas coisas porque a equipe de design poderia ter problemas.
Isso fez total sentido. Enter, HTMLElement.dataet. A propriedade dataet fornece aos programadores JS a capacidade de ler/escrever atributos personalizados em um elemento. O benefício é que seu acesso no DOM assim como em HTML.
A parte confusa disto é que um atributo de dados HTML e seu conjunto de dados DOM correspondente.property não compartilham o mesmo nome. Aqui está o que encontrei ao ler no site MDN.
>
>
>
É aqui que entra a maioria dos assuntos. Como novo programador do JS, achei isto especialmente útil para definir atributos aos elementos enquanto adiciona os ouvintes dos eventos. Palavra de prudência: Eu ainda sou um estudante e isso pode não ser a melhor prática, mas pelo menos eu não estava entrando e modificando o HTML existente.
Então, depois de ler as regras de nomenclatura para este assunto, podemos então avançar com o material útil, acessando e definindo os valores, seguidos de alguns exemplos.
>
Agregar os valores na minha opinião, dá-nos mais opções de manipulação, ao contrário de apenas chamar a classeNome ou o id. Isto é poderoso porque não temos que nos preocupar se a equipe de design vai ou não vir em um dia e dizer, adivinhem, nós renomeamos todas as nossas classes. Aqui estão alguns exemplos da sintaxe:
>>
>
>
Aqui está um exemplo que o Mozilla dá:
>
E para os meus companheiros de coorte.” Esta deve mesmo chegar a casa. Com a nossa dupla de programação Toyland, foi assim que o Alex e eu o usámos:
>
>
Depois de conversar com um amigo que agora está aprendendo Reage, o que vamos descobrir, se você estiver lendo através deste código, é que .innerText é um método IE, e deveríamos estar usando .textContent, mas isso é para outro post.
Com a quantidade de tempo que estamos gastando aprendendo material novo, às vezes aspectos importantes escapam pelas rachaduras. Assim que a semana do projeto chegar aqui, acredito que todos nós vamos melhorar muito na utilização dessas ferramentas personalizadas para manipular o DOM e escrever código limpo. Espero que tenha gostado da leitura!