# Оптимизация работы с DOM в JavaScript

Работа с DOM это медленная операция. Поэтому нужно сводить к минимуму получение элементов, чтение и запись данных, особенно в цикле.

Давайте посмотрим на примере. Пусть у нас есть инпут, в который вводится число:

`<input>`

Давайте по потери фокуса проверим, что введенное число находится в заданном диапазоне:

`let input = document.querySelector('input'); input.addEventListener('blur', function() { if (+input.value > 0 && +input.value <= 10) { console.log('+++'); } else { console.log('---'); } });`

Проблема в том, что мы два раза прочитываем текст из инпута, хотя число в нем не меняется. Это, конечно же, не оптимально. Оптимизируем:

`let input = document.querySelector('input'); input.addEventListener('blur', function() { let num = +input.value; if (num > 0 && num <= 10) { console.log('+++'); } else { console.log('---'); } });`

Следующий код проверяет введенное значение. Выполните оптимизацию:

`<input>` `let input = document.querySelector('input'); input.addEventListener('blur', function() { if (input.value === '1' || input.value === '2') { console.log('+++'); } else { console.log('---'); } });`

Следующий код ищет сумму целых чисел от единицы до введенного в инпут числа. Выполните оптимизацию:

`<input>` `let input = document.querySelector('input'); input.addEventListener('blur', function() { let sum = 0; for (let i = 1; i <= +input.value; i++) { sum += i; } console.log(sum); });`

Следующий код ищет сумму делителей введенного в инпут числа. Выполните оптимизацию:

`<input> <div></div>` `let input = document.querySelector('input'); input.addEventListener('blur', function() { let sum = 0; for (let i = 1; i <= +input.value; i++) { if (input.value % i === 0) { sum += i; let div = document.querySelector('div'); div.textContent = sum; } } });`

Следующий код возводит числа из абзацев в квадрат. Выполните оптимизацию:

`<p>1</p> <p>2</p> <p>3</p> <p>4</p>` `let elems = document.querySelectorAll('p'); for (let elem of elems) { elem.textContent = elem.textContent * elem.textContent; }`

Следующий код проверяет, что в инпут введена строка длиной в заданном диапазоне. Выполните оптимизацию:

`<input data-min="5" data-max="10">` `let inp = document.querySelector('input'); inp.addEventListener('blur', function() { if (inp.dataset.min > inp.value.length || inp.dataset.max < inp.value.length) { console.log('+++'); } else { console.log('---'); } });`
← →
↑
en ru