Wenke vir die skryf van kode aan die hand van DOM in JavaScript

Gestel jy staan voor 'n taak van voldoende kompleksiteit, vir die implementering waarvan jy 'n sekere aantal reëls kode moet skryf.

'n Verkeerde benadering sal wees om te probeer om die hele oplossing se kode in een keer te skryf, en dan eers begin om dit te toets. In hierdie geval is die waarskynlikheid hoog dat niks sal werk nie, en jy sal 'n fout in 'n groot hoeveelheid kode moet soek.

'n Korrekte benadering is om die taak op te deel in klein elementêre stappe, wat jy sal implementeer en onmiddellik die korrektheid daarvan sal verifieer. In hierdie geval, selfs al maak jy êrens 'n fout, sal jy dit dadelik opmerk en dit regmaak.

Kom ons probeer dit in die praktyk. Gestel jy het paragrawe:

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

Gestel jou taak is om die paragrawe met getalle, deelbaar deur 3, te vind en die som van hul getalle te bereken.

As eerste klein stap sou ek voorstel om ons paragrawe as 'n array te kry en hierdie array in die konsole te vertoon, om te sien dat ons dit alles korrek gekry het. Kom ons doen dit:

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

Die volgende klein stap is om ons paragrawe met 'n lus te deurloop en elkeen afsonderlik in die konsole te vertoon:

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

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

En nou, in die lus, vertoon ons die teks van ons paragrawe:

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

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

Laat ons nou die tekste vertoon van daardie paragrawe wie se getal deelbaar is deur 3:

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

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

Na bevestiging dat ons die korrekte paragrawe kry, kan ons voortgaan om die som van hul getalle te bereken:

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

Gegee 'n lys met jare:

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

Kry die jare waarvan die som van die syfers gelyk is aan 6. Vind die som van die verkrygde jare.