Mẹo viết mã với ví dụ về DOM trong JavaScript

Giả sử bạn phải đối mặt với một nhiệm vụ đủ phức tạp, để thực hiện nó cần phải viết một số lượng dòng mã nhất định.

Cách tiếp cận sai là cố gắng viết toàn bộ mã giải pháp một lần, rồi mới bắt đầu kiểm tra nó. Trong trường hợp này, khả năng cao là không có gì hoạt động, và bạn sẽ phải tìm lỗi trong một lượng mã lớn.

Cách tiếp cận đúng là chia nhỏ nhiệm vụ thành các bước cơ bản nhỏ, mà bạn sẽ thực hiện và kiểm tra ngay tính đúng đắn của chúng. Trong trường hợp này, ngay cả khi bạn mắc lỗi ở đâu đó, bạn sẽ ngay lập tức nhận thấy vấn đề và sửa chữa nó.

Hãy thử thực hành. Giả sử bạn có các đoạn văn:

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

Giả sử bạn có nhiệm vụ tìm các đoạn văn có số chia hết cho 3, và tính tổng các số đó.

Bước nhỏ đầu tiên tôi đề xuất là lấy các đoạn văn của chúng ta dưới dạng mảng và in mảng này ra bảng điều khiển (console), để xem rằng chúng ta đã lấy mọi thứ đúng. Hãy làm điều đó:

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

Bước nhỏ tiếp theo cần duyệt qua các đoạn văn của chúng ta bằng vòng lặp và in từng đoạn ra bảng điều khiển riêng lẻ:

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

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

Và bây giờ trong vòng lặp, hãy in nội dung văn bản của các đoạn văn của chúng ta:

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

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

Bây giờ hãy in nội dung văn bản của những đoạn văn có số chia hết cho 3:

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

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

Sau khi đảm bảo rằng chúng ta nhận được các đoạn văn chính xác, có thể bắt đầu tính tổng các số của chúng:

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

Cho một danh sách các năm:

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

Lấy các năm có tổng các chữ số bằng 6. Tìm tổng các năm nhận được.