JavaScript-те DOM-мен жұмыс істеуді оңтайландыру

DOM-мен жұмыс істеу баяу операция болып табылады. Сондықтан элементтерді алуды, деректерді оқу мен жазуды, әсіресе цикл ішінде, minimum деңгейге дейін азайту керек.

Мысал арқылы қарастырайық. Бізде сан енгізілетін енгізу өрісі бар болсын:

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