Melhores práticas para manipulação eficiente de DOM em JavaScript

Use classes CSS em vez de estilos embutidos

Ao estilizar elementos DOM, é melhor e aconselhável usar classes CSS em vez de estilos inline. Isso ocorre porque as classes CSS podem ser facilmente modificadas e reutilizadas, enquanto os estilos embutidos podem ser mais difíceis de gerenciar e manter.

Por exemplo, em vez disso:

1

document.getElementById('button').style.backgroundColor = 'red';

Você pode estilizar o elemento desta maneira:

1

.button-style {

2

  background-color: red;

3

}

E então aplique o estilo ao elemento assim:

1

let cardButton = document.getElementById('button');

2

cardButton.classList.add('button-style');

Esta é uma maneira melhor de estilizar elementos DOM.

Seletores de Cache

O cache do seletor é outro método para aprimorar a eficiência do seu código de manipulação de DOM. Você pode armazenar o resultado do seletor em uma variável e reutilizá-lo mais tarde, em vez de consultar constantemente o DOM pelo mesmo elemento. Isso pode acelerar seu código e ajudar a reduzir o número de consultas DOM.

Por exemplo, em vez de fazer isso:

1

document.querySelector('#button').addEventListener('click', function() {

2

    // do something

3

});

4

document.querySelector('#button').className = "enabled";

Faça isso em vez disso:

1

const myButton = document.querySelector('#button');

2

myButton.addEventListener('click', function() {  

3

    // do something

4

});

5

myButton.className = "enabled";

Isso é chamado de cache de um seletor.

Usar delegação de evento

A delegação de evento é uma técnica que envolve anexar um ouvinte de evento a um elemento pai e, em seguida, manipular eventos que ocorrem em seus elementos filho. Se você tiver muitos elementos filho, isso pode ser mais eficaz do que anexar ouvintes de eventos individualmente a cada um. Delegar eventos também pode ajudar seu código a ficar mais limpo e fácil de manter.

Digamos que você tenha alguns botões dentro de um contêiner div ao qual deseja adicionar ouvintes de evento. Em vez de adicionar o ouvinte de evento aos botões individuais, você pode anexá-lo ao elemento pai, o elemento div.

Considere este exemplo:

Aqui, em vez de anexar um evento de clique em cada botão, criamos um único evento de clique para o contêiner pai. Dentro desse manipulador de eventos, usamos o event.target para obter o botão que foi realmente clicado.

Não faz diferença se houver apenas alguns elementos que precisam de manipuladores de eventos, mas se estivermos anexando manipuladores de eventos a um grande número de elementos – por exemplo, em uma tabela com milhares de linhas – essa técnica pode economizar muito tempo.

Use seletores com sabedoria

Uma maneira comum de acessar os elementos DOM em uma página da Web é usando seletores. Seletores como getElementByClassName, getElementById, querySelector, querySelectorAll, e assim por diante, são usados ​​para selecionar elementos para acessá-los e manipulá-los. Por exemplo, ao escolher qual usar, o getElementById ou o querySelector método para selecionar elementos da página da web. É importante saber como cada método seleciona elementos e quando eles podem ser usados.

O querySelector O método é usado para selecionar um elemento com base em um seletor CSS. Isso significa que você pode obter um ID, uma classe ou qualquer outro seletor usando esse método. querySelector pega o primeiro elemento que atende aos critérios.

1

const textHead = document.querySelector("#title")

2

3

const textHead = document.querySelector("#title h1")

No primeiro exemplo, o # é usado para especificar que você está procurando um ID com o nome title. No segundo exemplo, você está pegando o elemento h1 que segue o ID com o nome title

O getElementById é mais direto. É usado apenas para recuperar ou selecionar um elemento por seu ID.

1

const content = document.getElementById("heading")

Aqui você não precisa especificar que está procurando um ID com o # como já está no nome da função.

Se você precisar escolher elementos usando regras mais complexas que podem ser representadas usando um seletor CSS, você deve optar pelo querySelector método. No entanto, use getElementById se você quiser selecionar um elemento com base em seu ID.

Evite usar o innerHTML Método para manipular elementos HTML

O innerHTML, embora uma maneira eficaz de manipular os elementos DOM HTML possa ser insegura e vulnerável a ataques de script entre sites (XSS). Um ataque XSS usando innerHTML funciona injetando código malicioso em seu site, que então usa para realizar um ataque. innerHTML também pode ser um método mais lento de atualizar dinamicamente o conteúdo HTML porque requer que o navegador analise e renderize todo o conteúdo HTML do elemento a partir do texto bruto.

No entanto, existem algumas alternativas à utilização deste método: o createElement e textContent métodos.

O createElement pode ser usado para criar novos elementos HTML e adicioná-los ao DOM usando o método appendChild() propriedade.

1

const newText = document.createElement('p');

2

3

const parentElement = document.getElementById('heading');

4

parentElement.appendChild(newText);

O textContent A propriedade pode ser usada para definir ou obter o conteúdo de texto de um elemento.

1

const elementOne = document.getElementById('textOne');

2

elementOne.textContent = 'New text added!';

Alterando a innerHTML propriedade de um elemento pode ser muito mais fácil de codificar do que criar vários nós usando createElement e appendChild. Usando innerHTML no entanto, pode ser menos seguro e mais propenso a ataques.

Evite aninhar elementos em seletores

Em algumas circunstâncias, aninhar componentes dentro de seletores pode ser uma má ideia ao manipular o DOM. Isso ocorre porque torna mais difícil reutilizar o seletor em outras partes do seu código, pois você precisará substituir o seletor específico. Também pode tornar mais difícil manter seu código e implementar novos recursos porque se sua estrutura HTML mudar, o seletor pode não corresponder mais ao elemento que você pretende.

Por exemplo, em vez de aninhar elementos desta forma:

1

document.querySelector('#parent .child');

Fazem isto:

1

const parent = document.querySelector('#parent');

2

const child = parent.querySelector('.child');

Você pode reutilizar a variável pai em outras partes do seu código, o que a torna mais flexível e simples de manter, e há menos chances de que ela quebre se a estrutura do HTML for alterada.

Aqui está outro exemplo de boas e más práticas para aninhar elementos em seletores:

1

// BAD PRACTICE

2

let menuHead = document.querySelector('header > nav > ul.menu');

3

4

// GOOD PRACTICE

5

let menuHead = document.querySelector('.menu');

Claro, pode haver circunstâncias em que seja necessário ou apropriado aninhar elementos em seletores.

Limite o número de manipulações de DOM

O DOM pode ser lento para manipular, especialmente se você estiver modificando a página com frequência. Tente reduzir o número de operações DOM executadas para otimizar o desempenho. Por exemplo, se você precisar alterar o texto de um parágrafo e a cor de fundo de um botão, é melhor fazer as duas alterações ao mesmo tempo do que separadamente.

Conclusão

A manipulação eficaz do DOM é essencial para a criação de aplicativos da web que sejam rápidos e ofereçam uma experiência de usuário perfeita. Os desenvolvedores podem acelerar seu código e diminuir a possibilidade de problemas de desempenho seguindo as práticas recomendadas, incluindo a redução do número de alterações de DOM e utilizando a delegação de eventos. Também é crucial testar e avaliar o código para encontrar problemas e corrigi-los conforme necessário.