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:

html<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:

javascriptlet 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:

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

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