Petua untuk Menulis Kod Menggunakan DOM dalam JavaScript

Katakan anda mempunyai tugas yang cukup rumit, dan untuk melaksanakannya anda perlu menulis sejumlah baris kod.

Pendekatan yang salah adalah dengan cuba menulis keseluruhan kod penyelesaian sekaligus, dan kemudian mula menyemaknya. Dalam kes ini, terdapat kebarangkalian tinggi bahawa tiada apa yang akan berfungsi, dan anda terpaksa mencari ralat dalam sejumlah besar kod.

Pendekatan yang betul adalah dengan membahagikan tugas kepada langkah-langkah asas kecil, yang akan anda laksanakan dan segera semak ketepatannya. Dalam kes ini, walaupun anda melakukan kesilapan, anda akan segera menyedari masalah dan membetulkannya.

Mari kita cuba dalam praktik. Katakan anda mempunyai perenggan:

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

Katakan tugas anda adalah untuk mencari perenggan dengan nombor yang boleh dibahagi dengan 3, dan mencari jumlah nombor-nombor tersebut.

Langkah kecil pertama yang saya cadangkan adalah untuk mendapatkan perenggan kami dalam bentuk tatasusunan dan memaparkan tatasusunan ini di konsol, untuk memastikan kami mendapat semuanya dengan betul. Mari lakukan ini:

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

Langkah kecil seterusnya adalah untuk mengulangi perenggan kami dengan gelung dan memaparkan setiap satu daripadanya di konsol secara berasingan:

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

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

Dan sekarang dalam gelung, mari kita paparkan teks perenggan kami:

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

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

Sekarang mari kita paparkan teks perenggan yang nombornya boleh dibahagi dengan 3:

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

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

Setelah memastikan bahawa kami mendapat perenggan yang betul, kami boleh mula menjumlahkan nombor-nombor tersebut:

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

Diberi senarai dengan tahun:

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

Dapatkan tahun yang jumlah digitnya sama dengan 6. Cari jumlah tahun yang diperoleh.