Съвети за писане на код с примери за 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>