DOM менен иштөөнү JavaScriptте оптималдаштыруу

DOM менен иштөө жай операция болуп саналат. Ошондуктан элементтерди алууну, маалыматты окууну жана жазууну, айрыкча циклде, минималдаштыруу керек.

Келгиле, мисал менен карап көрөлү. Бизде сан киргизилүүчү input бар дейли:

<input>

Фокус жоготулганда, киргизилген сан белгилүү диапазондо турганын текшерип көрөлү:

let input = document.querySelector('input');

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

Көйгөй, биз inputтон текстти эки жолу окуп жатабыз, ал эми андагы сан өзгөрбөйт. Бул, албетте, оптималдуу эмес. Оптималдаштыралы:

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ко киргизилген санга чейинки бүтүн сандардын суммасын табат. Оптималдаштырууну ишке ашырыңыз:

<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ко киргизилген сандын бөлүүчүлөрүнүн суммасын табат. Оптималдаштырууну ишке ашырыңыз:

<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ко белгилүү диапазондогу узундуктуу сап киргизилгенин текшерет. Оптималдаштырууну ишке ашырыңыз:

<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('---');
	}
});