Совети за пишување код на примерот на DOM во JavaScript

Нека пред вас стои задача со доволна комплексност, за чија имплементација потребно е да се напише одреден број на линии код.

Погрешен пристап би бил да се обидете да го напишете целиот код на решението одеднаш, а потоа да започнете со негова проверка. Во овој случај, постои голема веројатност дека ништо нема да работи, а грешката ќе мора да се бара во голем количина на код.

Правилен пристап е поделба на задачата на мали елементарни чекори, кои ќе ги имплементирате и веднаш ќе ја проверувате нивната точност. Во овој случај, дури и ако направите грешка некаде, веднаш ќе забележите проблемот и ќе го исправите.

Ајде да пробаме во пракса. Нека имате параграфи:

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

Нека пред вас стои задачата да ги пронајдете параграфите со броеви кои се множители на 3, и да ја пронајдете сумата на нивните броеви.

Како прв мал чекор би предложил да ги добиеме нашите параграфи во форма на низа и да ја испечатиме оваа низа во конзола, за да видиме дали сме ги добиле сите правилно. Ајде да го направиме ова:

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

Следниот мал чекор е да ги итерираме нашите параграфи со циклус и да го испечатиме секој од нив во конзолата посебно:

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

for (let elem of elems) {
  console.log(elem);
}

А сега во циклусот да ги испечатиме текстовите од нашите параграфи:

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

for (let elem of elems) {
  console.log(elem.textContent);
}

Сега ајде да ги испечатиме текстовите на оние параграфи чиј број е делив со 3:

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

for (let elem of elems) {
  let text = +elem.textContent;
  
  if (text % 3 === 0) {
    console.log(text);
  }
}

Откако се уверивме дека ги добиваме точните параграфи, можеме да започнеме со сумирање на нивните броеви:

javascriptlet elems = document.querySelectorAll('p');
let sum = 0;

for (let elem of elems) {
  let text = +elem.textContent;
  
  if (text % 3 === 0) {
    sum += text;
  }
}

console.log(sum);

html<ul>
  <li>2000</li>
  <li>2004</li>
  <li>2021</li>
  <li>2022</li>
  <li>2025</li>
  <li>2031</li>
</ul>