Entrar Ainda não tem acesso?
1
resposta

Gostaria de entender o que e o DOM e sobre não percorrer o DOM varias vezes

Referente ao curso JavaScript: conhecendo o Browser e padrões de projeto, no capítulo A ligação entre as ações do usuário e o modelo e atividade Evitando percorrer o DOM muitas vezes

por wladimir chinchio
| 256.4k xp | 19 posts

O professor deu o exemplo para criarmos um construtor para não percorremos o DOM varias vezes

class NegociacaoController {

  adiciona(event) {
        event.preventDefault();

        let $ = document.querySelector.bind(document);
        let inputData = $('#data');
        let inputQuantidade =  $('#quantidade');
        let inputValor = $('#valor');

        console.log(inputData.value);
        console.log(inputQuantidade.value);
        console.log(inputValor.value);

  }
}

Então deixamos dessa forma para que possamos percorrer o DOM apenas uma única vez, mesmo se clicamos 300x em incluir.

  constructor() {

            let $ = document.querySelector.bind(document);

            this.inputData = $('#data');
            this.inputQuantidade =  $('#quantidade');
            this.inputValor = $('#valor');
  }

Gostaria muito de entender o que é o DOM, e porque no formato em que as propriedades são chamadas no constructor ele percorre apenas 1 vez, diferente da outra forma em que percorre várias. Não consegui distinguir isso.

Se alguém pudesse me explicar o que o professor fez, ficaria muito grato

1 resposta
por Lorena Garcia
| 8361.4k xp | 12214 posts
Alura Scuba Team Suporte Educacional

Olá Wladimir, tudo bem?

Desculpe a demora em retornar.

O DOM (Document Object Model) é uma representação em forma de árvore de todos os elementos HTML de uma página. Quando o navegador carrega uma página, ele cria uma representação do DOM e a disponibiliza para o JavaScript. Com isso, o JavaScript pode acessar e manipular os elementos da página.

No exemplo que você trouxe, o professor utilizou o método document.querySelector para selecionar os elementos da página. Esse método retorna uma referência ao elemento HTML especificado no seletor CSS passado como parâmetro.

No primeiro exemplo que você postou, o método document.querySelector é chamado três vezes, uma para cada elemento que se deseja selecionar. Isso significa que o DOM é percorrido três vezes, o que pode ser custoso em termos de desempenho, principalmente em páginas com muitos elementos.

Já no segundo exemplo, o professor utilizou o método document.querySelector.bind(document) para criar uma função que já possui o document como contexto. Essa função é atribuída às propriedades do objeto this, que é a instância da classe NegociacaoController. Dessa forma, quando a função adiciona é chamada, os elementos da página são selecionados apenas uma vez, no momento em que a instância da classe é criada.

Isso evita que o DOM seja percorrido várias vezes, o que melhora o desempenho da página. Além disso, torna o código mais legível e fácil de manter.

Indico a leitura desse artigo da Alura:

Um abraço e bons estudos.