Sfaturi pentru scrierea codului cu exemplu de DOM în JavaScript

Să presupunem că aveți o sarcină suficient de complexă, pentru implementarea căreia trebuie să scrieți un anumit număr de linii de cod.

Abordarea greșită ar fi să încercați să scrieți întregul cod al soluției deodată, și abia apoi să începeți să îl verificați. În acest caz, există o probabilitate mare că nimic nu va funcționa, iar eroarea va trebui căutată într-o cantitate mare de cod.

Abordarea corectă este împărțirea sarcinii în mici pași elementari, pe care îi veți implementa și verifica imediat corectitudinea lor. În acest caz, chiar dacă greșiți undeva, veți observa imediat problema și o veți corecta.

Să încercăm în practică. Să presupunem că aveți paragrafele:

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

Să presupunem că sarcina este să găsiți paragrafele cu numere divizibile cu 3, și să găsiți suma acestor numere.

Primul mic pas aș sugera să obținem paragrafele noastre sub formă de array și să afișăm acest array în consolă, pentru a verifica că am obținut totul corect. Să facem asta:

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

Următorul mic pas este să parcurgem paragrafele noastre cu un ciclu și să afișăm fiecare dintre ele în consolă separat:

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

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

Și acum în ciclu să afișăm textele paragrafelor noastre:

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

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

Acum să afișăm textele acelor paragrafe al căror număr este divizibil cu 3:

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

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

După ce ne-am asigurat că obținem paragrafele corecte, putem trece la însumarea numerelor lor:

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

Este dată o listă cu ani:

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

Obțineți anii a căror sumă a cifrelor este egală cu 6. Găsiți suma anilor obținuți.