Separando responsabilidade

Data-attributes

https://www.freepik.com/vectors/icons

Hoje vamos ver um pouco como podemos separar responsabilidades quando fazemos manipulação da DOM (Document Object Model), usando data-attributes de uma forma bem simples.

Muitos projetos utilizam classes ou ID’s para fazer a manipulação da DOM, entretanto tem um certo problema nisso.

A DOM é basicamente a árvore da nossa estrutura HTML, quando falamos “manipular a DOM”, estamos querendo dizer que vamos manipular a nossa estrutura HTML, ou seja, deixar ela dinâmica

Dentro de um código, cada coisa tem sua determinada função, as classes e ID’s, por exemplo, são seletores CSS que facilitam na estilização da página e sua principal função é essa, apenas nomear tags HTML para podermos construir o CSSOM de forma produtiva. Portanto, quando usamos esses seletores para manipular a DOM, no nosso arquivo Javascript, estamos misturando um pouco as coisas, assim elas passam a ter mais que uma responsabilidade dentro daquele projeto.

O CSSOM, segue o mesmo conceito da DOM, porém é a árvore do CSS. Quando o navegador renderiza seu projeto, o primeiro arquivo que ele procura é o index.html, depois disso ele passa linha a linha lendo os códigos e quando ele se depara com um link, como o do CSS, ele redireciona para a página indicada e renderiza tudo o que está nela, construindo a nossa árvore do CSS e retornando os estilos na página.

Para solucionar esse problema, existe uma forma mais saudável de manipular a DOM e separar responsabilidades. Sendo assim, podemos utilizar os chamados data-attributes, que são basicamente atributos que podemos criar nas nossas tag HTML, usando o prefixo data-.

Vamos para um exemplo prático, supondo que temos um formulário e queremos pegar a tag input, poderíamos fazer nosso HTML da seguinte maneira:

<main>
   <form>
      <div class=”inputs”>
           <label for=”nome”>Digite seu nome:</label>
           <input type=”text” name=”nome” class="inputs__style"         data-input>
      </div>
   </form>
</main>

Desse jeito, já criamos nosso data-attributes nomeando como data-inputs, agora vamos acessar ele no nosso Javascript e para isso existem alguns jeitos, mas vamos focar em um por enquanto. Então, pensando que queremos acessar a DOM e pegar a tag input, vamos chamar nosso data-attributes da seguinte maneira:

const input = document.querySelector("[data-inputs]");

Sempre que fomos pegar um atributo de uma tag, diferente da classe que usaríamos o ponto, nesse caso usamos os colchetes, assim o nosso Javascript consegue entender que queremos pegar o atributo da tag input.

Outras formas de acessar atributos

Também temos outros jeitos de acessar nossos atributos e é usando a função getAttributes(). Basicamente o que temos que fazer é percorrer a DOM, pegar a tag que queremos e colocar o nome do nosso atributo dentro da função, como mostra o exemplo abaixo:

const getInput = document.querySelector(".inputs__style");
const getAtrr = getInput.getAttribute("data-inputs");
console.log(getAttr);

E essa é uma outra forma de pegarmos atributos no nosso HTML.

Agradecimento

Obrigada por ler meus artigos, espero que esteja gostando, se você que está lendo quiser bater um papo comigo é só me chamar no meu Linkedin ;), até a próxima!