Optimering van DOM-werk in JavaScript

Werk met die DOM is 'n stadige bewerking. Daarom moet dit tot die minimum beperk word om elemente te verkry, data te lees en te skryf, veral in 'n lus.

Kom ons kyk na 'n voorbeeld. Gestel ons het 'n invoerveld waarin 'n nommer ingevoer word:

html<input>

Kom ons toets wanneer fokus verloor word, dat die ingevoerde nommer binne die gespesifiseerde reeks val:

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

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

Die probleem is dat ons twee keer die teks uit die invoerveld lees, hoewel die nommer daarin nie verander nie. Dit is, natuurlik, nie optimaal nie. Kom ons optimaliseer:

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

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

Задание 1

Die volgende kode toets die ingevoerde waarde. Voer optimalisering uit:

html<input>

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

input.addEventListener('blur', function() {
  if (input.value === '1' || input.value === '2') {
    console.log('+++');
  } else {
    console.log('---');
  }
});

Задание 2

Die volgende kode soek die som van heelgetalle van een tot by die nommer wat in die invoerveld ingevoer is. Voer optimalisering uit:

html<input>

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

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

Задание 3

Die volgende kode soek die som van delers van die nommer wat in die invoerveld ingevoer is. Voer optimalisering uit:

html<input>
<div></div>

javascriptlet 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;
    }
  }
});

Задание 4

Die volgende kode verhef die nommers uit die paragrawe tot die tweede mag. Voer optimalisering uit:

html<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.textContent = elem.textContent * elem.textContent;
}

Задание 5

Die volgende kode toets dat 'n string van 'n lengte binne die gespesifiseerde reeks in die invoerveld ingevoer is. Voer optimalisering uit:

html<input data-min="5" data-max="10">

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