Bạn có thể lấy phần tử theo lớp trong JavaScript không?

Sự khác biệt chính giữa querySelector() và getElementsByClassName() là ________ 21 _______ trả về phần tử HTML đầu tiên khớp với bộ chọn đã chỉ định. getElementsByClassName() sẽ trả về một mảng các phần tử khớp với tên lớp

Hãy xem một ví dụ mã. Giả sử bạn có ba phần tử nút khác nhau với lớp

// Array of all elements with the class name button
console.log(document.getElementsByClassName('button'))

// Prints the first matching element in the DOM – button 1
console.log(document.querySelector('.button'));

4

Button 1

Button 2

Button 3

Bây giờ hãy xem mỗi chức năng tiện ích hoạt động như thế nào khi cố gắng lấy một phần tử theo tên lớp

// Array of all elements with the class name button
console.log(document.getElementsByClassName('button'))

// Prints the first matching element in the DOM – button 1
console.log(document.querySelector('.button'));

Một thuộc tính đáng chú ý khác về querySelector() là nó cho phép bạn viết truy vấn CSS3 như. Không giống như getElementsByClassName() bạn chỉ cần viết định danh tên lớp

Có phần tử get theo lớp không?

Câu trả lời ngắn gọn là không. Không có phần tử lấy theo lớp như hàm

// Array of all elements with the class name button
console.log(document.getElementsByClassName('button'))

// Prints the first matching element in the DOM – button 1
console.log(document.querySelector('.button'));

7. Nhưng bạn có thể sử dụng querySelector() để lấy một phần tử theo tên lớp. Bộ chọn truy vấn phải được viết như CSS3

Hãy xem cách sử dụng nó với một ví dụ mã

document.querySelector('body .button:nth-child(2)')

Cách lấy tất cả các phần tử có cùng tên lớp trong JavaScript

Để lấy tất cả các phần tử có cùng tên lớp, bạn có thể sử dụng getElementsByClassName() hoặc

document.querySelector('body .button:nth-child(2)')

0

document.querySelector('body .button:nth-child(2)')

0 là phương pháp ưa thích vì đây là phương pháp hiện đại hơn và cho phép bạn viết các truy vấn CSS3–có tính linh hoạt hơn getElementsByClassName()

// Array of all elements with the class name button
console.log(document.getElementsByClassName('button'))

// Array of all elements with the same class name
console.log(document.querySelectorAll('.button'));

Cách lặp trong document.querySelector('body .button:nth-child(2)') 0 hoặc getElementsByClassName()

Bạn có thể sử dụng vòng lặp for thông thường hoặc

document.querySelector('body .button:nth-child(2)')

5 để lặp lại từng mục đã được chụp bằng

document.querySelector('body .button:nth-child(2)')

0.

document.querySelector('body .button:nth-child(2)')

5không hoạt động với getElementsByClassName() bởi vì nó không phải là NodeList[] mà là HTMLCollection

Nếu bạn cố gắng thực hiện

document.querySelector('body .button:nth-child(2)')

9, bạn có thể nhận được thông báo lỗi chẳng hạn như

document.getElementsByClassName("some_class").forEach is not a function

Để lặp lại trên getElementsByClassName(), bạn có thể sử dụng vòng lặp for-in hoặc vòng lặp for cơ bản

Hãy xem các ví dụ về cách lặp qua cả hai trường hợp sử dụng

const elements = document.querySelectorAll('.button');

const element2 = document.getElementsByClassName('button');

// Iterate with forEarch()
elements.forEach(element => console.log(element));

// Example #1: for-in for getElementsByClassName()
for (const key in element2) {
    if (Object.hasOwnProperty.call(element2, key)) {
        const element = element2[key];
        console.log(element)
    }
}

// Example #2: for-loop for getElementsByClassName()
for (let index = 0; index < elements2.length; index++) {
    const element = elements2[index];
    console.log(element)
}

Tôi thích tweet về mã và đăng các đoạn mã hữu ích. Theo tôi ở đó nếu bạn cũng muốn một số

Trong hướng dẫn này, bạn sẽ tìm hiểu cách Javascript lấy phần tử theo lớp của phần tử. Bạn sẽ xem xét các phương pháp khác nhau và sẽ xem xét các ví dụ khác nhau cho cùng một

Khi bạn muốn chơi với DOM (Mô hình đối tượng tài liệu), một trong những điều cơ bản và quan trọng nhất mà bạn muốn làm là chọn các thành phần DOM

Có nhiều cách để chọn một phần tử trong DOM như, lấy phần tử theo id, lấy phần tử theo lớp, lấy phần tử theo tên thẻ, v.v. Ở đây chúng ta sẽ xem cách lấy một phần tử theo lớp

Mục lục

---

1. Sử dụng getElementsByClassName JavaScript

Phương thức getElementsByClassName được sử dụng để lấy tất cả các thành phần có cùng tên lớp trong tài liệu.

Phương thức trả về các đối tượng giống như mảng của tất cả các phần tử có cùng tên lớp

Phương thức này có thể được gọi theo hai cách

1. Gọi trên toàn bộ tài liệu - Khi phương thức được gọi trên tài liệu thì nó sẽ chọn tất cả các phần tử có cùng tên lớp trong tài liệu. Ví dụ - document.getElementsByClassName('class-name')
2. Gọi một phần tử (cha) - Khi phương thức được gọi trên một phần tử thì nó chỉ chọn các phần tử có cùng tên lớp trong phần tử (cha). Ví dụ - parent.getElementsByClassName('class-name')

Lưu ý . Tên phương thức là getElementsByClassName chứ không phải getElementByClassName. Các phần tử vì có thể có nhiều hơn 1 phần tử có tên lớp trong trang web.

1. Dưới đây là một ví dụ để lấy tất cả các thành phần có tên là 'hộp' trong tài liệu

1. Gọi phương thức trên tài liệu

  
BOX 1
  
bar 1
  
BOX 2
  
bar 2

BOX 3
bar 3
BOX 4
bar 4

▶ Hãy thử

đầu ra

Dưới đây là một ví dụ để lấy tất cả các phần tử có lớp có tên 'hộp' trong một phần tử cụ thể

2. Chỉ nhận các phần tử trong phần tử cha theo lớp

  
BOX 1
  
bar 1
  
BOX 2
  
bar 2

BOX 3
bar 3
BOX 4
bar 4

▶ Hãy thử

đầu ra

---

truy cập phần tử

Các phần tử được trả về bởi phương thức getElementsByClassName có thể được truy cập bằng các giá trị chỉ mục của nó.

Mỗi phần tử có giá trị chỉ mục của nó trong HTMLCollection bắt đầu từ 0. Vì vậy, nếu bạn muốn lấy phần tử đầu tiên với một số lớp, hãy sử dụng elements[0] .

Truy cập phần tử và thêm phong cách cho nó

let parentElement = document.getElementById("id1");

function addStyle() {
  let elements = parentElement.getElementsByClassName("box");
  for (let i = 0; i < elements.length; i++) {
    let myElement = elements[i]; // access element
    myElement.style.background = "lightgreen";
  }
}

▶ Hãy thử

đầu ra

hộp 1

thanh 1

hộp 2

thanh 2

hộp 3

thanh 3

hộp 4

thanh 4

Tìm phần tử theo lớp và thêm kiểu

---

Nhận phần tử có nhiều hơn một lớp

Nếu bạn muốn chọn tất cả các phần tử có nhiều hơn một lớp được đề cập thì hãy chuyển các tên lớp mong muốn được phân tách bằng dấu cách trong getElementsByClassName .

Nhận các phần tử có cả hai lớp 'hộp' và 'thanh'

Both box and bar class
Only box class.
Only bar class.
Both box and bar class
Only bar class.
Only box class.
Find element with classes box and bar

▶ Hãy thử

đầu ra

---

2. Sử dụng querySelector JavaScript

Phương thức querySelector là một phương thức bộ chọn trong JavaScript sử dụng bộ chọn CSS để tìm một phần tử trong tài liệu.

Nó trả về phần tử đầu tiên trong tài liệu khớp với bộ chọn đã chỉ định

Để lấy phần tử có lớp, hãy nhập tên lớp bằng dấu chấm và nó sẽ trả về phần tử đầu tiên có lớp được chỉ định

Lấy phần tử đầu tiên với lớp được chỉ định

Box number 1.
Box number 2.
Box number 3.
Box number 4.
Box number 5.
Findfirst element with class 'box'

▶ Hãy thử

đầu ra

---

báo cáo quảng cáo này

3. Sử dụng querySelectorAll javascript

The querySelectorAll cũng là một phương thức để chọn các phần tử trên cơ sở bộ chọn CSS. Sự khác biệt duy nhất giữa querySelector và querySelectorAll là querySelectorAll selects all the elements matching the selector as an array-like object.

Nhận tất cả các phần tử với lớp được chỉ định

Box number 1.
Box number 2.
Box number 3.
Box number 4.
Box number 5.
Findfirst element with class 'box'

▶ Hãy thử

đầu ra

---

Phần kết luận

Trong hướng dẫn này, bạn đã học cách lấy một phần tử theo một hoặc nhiều lớp trong javascript bằng 3 phương thức khác nhau với các ví dụ của chúng

Làm cách nào để lấy giá trị thuộc tính lớp trong JavaScript?

Bạn có thể lấy phần tử theo loại trong JavaScript không?

Làm cách nào để lấy Internalhtml theo tên lớp trong JavaScript?