DEV Community

m1rr4
m1rr4

Posted on

quão satisfatório é navegar hierarquicamente sobre o DOM; ainda mais quando acontece organicamente.

Hierarquia e Modularidade no DOM com JavaScript

Quando manipulamos o DOM (Document Object Model) no JavaScript, uma abordagem bem estruturada e hierárquica não só torna o código mais legível, como também traz uma enorme satisfação para quem desenvolve. A seguir, exploraremos como iterar de maneira organizada sobre elementos do DOM usando seletores CSS e atributos personalizados.

Iteração sobre elementos do DOM

Ao utilizar querySelectorAll, é possível selecionar múltiplos elementos e iterar sobre eles com métodos como .forEach(). Esse processo permite navegar por hierarquias específicas, operando em contextos limitados e claros.

Exemplo prático:

const produtos = document.querySelectorAll('.produto');
produtos.forEach(produto => {
  const produtoAberto = produto.querySelector('.produto-aberto');

  if (produtoAberto) {
    const select = produtoAberto.querySelector('select');
    if (select) {
      console.log(`ID do produto aberto: ${produtoAberto.id}`);
      console.log(`Valor selecionado: ${select.value}`);
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

Esse exemplo demonstra como iterar sobre uma lista de produtos, restringindo a manipulação ao escopo de cada produto. Dentro de cada elemento .produto, navegamos até o elemento filho .produto-aberto e, em seguida, ao <select> específico, criando uma lógica bem modular e organizada.

Uso de data-* para identificar elementos

Os atributos personalizados data-* fornecem uma maneira robusta e semântica de vincular dados diretamente aos elementos do DOM. Eles evitam a dependência de classes (que podem ser alteradas para estilização) e permitem uma identificação clara para lógica de negócio.

Exemplo:
HTML:

<div class="produto" data-produto-id="123" data-status="validado"></div>
<div class="produto" data-produto-id="456" data-status="pendente"></div>
Enter fullscreen mode Exit fullscreen mode

JavaScript:

const produtos = document.querySelectorAll('[data-produto-id]');
produtos.forEach(produto => {
  const id = produto.dataset.produtoId; // Acessa o ID do produto
  const status = produto.dataset.status; // Acessa o status do produto
  console.log(`ID: ${id}, Status: ${status}`);
});
Enter fullscreen mode Exit fullscreen mode

Essa abordagem mantém o HTML semântico e o código JavaScript mais organizado, especialmente ao trabalhar com sistemas que requerem informações contextuais diretamente no frontend.

Conclusão

Navegar hierarquicamente no DOM e usar atributos personalizados como data-* são práticas modernas e eficazes que ajudam a manter a modularidade e escalabilidade dos projetos. Essas técnicas permitem que o desenvolvedor crie fluxos claros e organizados, resultando em uma experiência de desenvolvimento satisfatória.

Seja estruturando hierarquias com querySelectorAll ou adicionando dados semânticos com data-*, o segredo está em manter a lógica bem delimitada e respeitar a modularidade, garantindo que o código seja intuitivo e fácil de manter.

Top comments (0)