Lấy một nhóm phần tử trong JavaScript

Trong các bài học trước, chúng ta đã sử dụng phương thức querySelector để lấy một phần tử trang. Bây giờ đã đến lúc học cách lấy một nhóm phần tử và thực hiện các thao tác đồng thời với nhiều phần tử.

Để làm điều này, có phương thức querySelectorAll, lấy tất cả các thẻ phù hợp với bộ chọn CSS dưới dạng một mảng các phần tử. Để làm gì đó với các phần tử tìm thấy, cần phải làm việc với mảng thu được, ví dụ, duyệt qua nó bằng vòng lặp và trong vòng lặp thực hiện một thao tác nào đó với từng phần tử riêng lẻ.

Giả sử, ví dụ, chúng ta có các đoạn văn với lớp www:

<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>

Hãy lấy mảng các đoạn văn này, duyệt qua chúng bằng vòng lặp và trong vòng lặp in ra văn bản của các đoạn văn tìm thấy vào console:

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

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

Và bây giờ hãy thêm dấu chấm than vào cuối văn bản của mỗi đoạn văn:

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

for (let elem of elems) {
	elem.textContent = elem.textContent + '!';
}

Cho các đoạn văn và một nút bấm. Khi nhấp vào nút bấm, hãy tìm tất cả các đoạn văn, duyệt qua chúng bằng vòng lặp và đặt văn bản của mỗi đoạn văn thành giá trị 'text'.

Cho các đoạn văn có văn bản và một nút bấm. Khi nhấp vào nút bấm, hãy ghi số thứ tự của nó vào cuối văn bản của mỗi đoạn văn.

Cho các ô nhập số, một đoạn văn và một nút bấm. Khi nhấp vào nút bấm, hãy tìm tổng các số từ các ô nhập và ghi tổng này vào văn bản của đoạn văn.