Съвети за писане на код с примери за DOM в JavaScript

Да предположим, че предстои да решите задача с достатъчна сложност, за чиято реализация е необходимо да напишете определен брой редове код.

Неправилният подход би бил да се опитате да напишете целия код на решението наведнъж, и чак след това да започнете да го проверявате. В този случай има голяма вероятност, че нищо няма да работи, а грешката ще трябва да се търси в голямо количество код.

Правилният подход е да разделите задачата на малки елементарни стъпки, които ще реализирате и веднага ще проверявате за правилност. По този начин, дори ако направите грешка някъде, ще я забележите веднага и ще я поправите.

Нека опитаме на практика. Да предположим, че имате параграфи:

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

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

Първата малка стъпка, която бих предложил, е да получим нашите параграфи под формата на масив и да изведем този масив в конзолата, за да видим, че сме ги получили правилно. Нека го направим:

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

Следващата малка стъпка е да обходим нашите параграфи с цикъл и да изведем всеки от тях в конзолата поотделно:

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

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

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

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

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

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

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

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

След като се убедим, че получаваме правилните параграфи, можем да преминем към сумирането на техните числа:

let 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);

Даден е списък с години:

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

Вземете годините, чиято сума от цифрите е равна на 6. Намерете сумата от получените години.