Trong hướng dẫn ngắn này, chúng tôi sử dụng JavaScript để lấy phần tử theo tên lớp. Chúng tôi chia nhỏ khái niệm, giải thích mã và sau đó thảo luận về những hạn chế của phương pháp được sử dụng
Trong trường hợp bạn có nhiều kinh nghiệm và chỉ ở đây để tìm giải pháp, bạn có thể sử dụng liên kết này
Mục lục - Javascript lấy phần tử theo lớp
- Thuộc tính lớp hoạt động như thế nào?
- Sử dụng phương thức getElementsByClassName[] của JavaScript
- Hạn chế và Hãy cẩn thận - JavaScript lấy phần tử theo lớp
- Các khái niệm liên quan khác
Thuộc tính lớp hoạt động như thế nào?
Thuộc tính lớp là thuộc tính tùy chọn của phần tử HTML. Thuộc tính này có thể được sử dụng trên bất kỳ phần tử HTML nào. Khi một lớp được tạo, tên của chúng có thể được CSS hoặc JavaScript sử dụng để áp dụng một kiểu cụ thể hoặc để thực hiện một số tác vụ nhất định. Điều này đảm bảo rằng tất cả các phần tử thuộc về một lớp cụ thể hoạt động và xuất hiện theo một kiểu tương tự
Đoạn mã dưới đây là một ví dụ về thuộc tính lớp
Title
Sử dụng phương thức getElementsByClassName[] của JavaScript
JavaScript getElementsByClassName được sử dụng để lấy tất cả các phần tử thuộc về một lớp cụ thể. Khi phương thức lấy phần tử theo tên lớp của JavaScript được gọi trên đối tượng tài liệu, nó sẽ tìm kiếm toàn bộ tài liệu, bao gồm các nút gốc và trả về một mảng chứa tất cả các phần tử
Cú pháp như sau
var elements = document.getElementsByClassName[name];
Ở đây “name” là tên lớp mà bạn muốn tìm và “elements” là một biến chứa mảng các phần tử
Mã và giải thích
Hãy lấy một mã HTML mẫu
- Name
- Skills
- Cost
- Projects
Bây giờ vì chúng tôi dự định tìm kiếm phần tử trong một phần cụ thể, trước tiên chúng tôi xác định phần đó cùng với ID
Thuộc tính className
của giao diện Element
nhận và đặt giá trị của thuộc tính class
của phần tử được chỉ định
Một biến chuỗi đại diện cho lớp hoặc các lớp được phân tách bằng dấu cách của phần tử hiện tại
const el = document.getElementById['item'];
el.className = el.className === 'active' ? 'inactive' : 'active';
Tên className
được sử dụng cho thuộc tính này thay vì class
vì xung đột với từ khóa "lớp" trong nhiều ngôn ngữ được sử dụng để thao tác DOM
className
cũng có thể là một thể hiện của SVGAnimatedString
nếu element
là một
elm.setAttribute['class', elm.getAttribute['class']]
0. Tốt hơn là lấy/đặt className
của một phần tử bằng cách sử dụng elm.setAttribute['class', elm.getAttribute['class']]
2 và elm.setAttribute['class', elm.getAttribute['class']]
3 nếu bạn đang xử lý các phần tử SVG. Tuy nhiên, hãy tính đến việc elm.setAttribute['class', elm.getAttribute['class']]
2 trả về elm.setAttribute['class', elm.getAttribute['class']]
5 thay vì elm.setAttribute['class', elm.getAttribute['class']]
6 nếu element
có thuộc tính class
trống Để thay đổi giá trị thuộc tính class
của phần tử HTML bằng JavaScript, bạn có thể sử dụng thuộc tính className
hoặc thuộc tính classList
được cung cấp cho mọi phần tử HTML đơn lẻ
Hướng dẫn này sẽ giúp bạn tìm hiểu cách sử dụng cả hai phương thức, bắt đầu từ thuộc tính className
Thay đổi giá trị lớp bằng thuộc tính className
Thuộc tính className
cho phép bạn tìm nạp giá trị thuộc tính class
của phần tử HTML dưới dạng chuỗi
Đây là một ví dụ về cách hoạt động của tài sản className
Hello World! This is a paragraph element.
const paragraph = document.getElementById["header"];
console.log[paragraph.className]; // "red"
Bây giờ bạn đã biết cách thức hoạt động của thuộc tính className
, bạn có thể thay đổi giá trị class
của một phần tử bằng cách gán một giá trị mới cho thuộc tính như sau
Hello World! This is a paragraph element.
const paragraph = document.getElementById["header"];
paragraph.className = "yellow blue";
console.log[paragraph.className]; // "yellow blue"
Sử dụng thuộc tính className
cho phép bạn thay đổi giá trị thuộc tính class
, nhưng bạn cần thêm giá trị trước đó theo cách thủ công nếu muốn giữ nguyên
Ví dụ, để giữ lại lớp
Hello World! This is a paragraph element.
const paragraph = document.getElementById["header"];
paragraph.className = "yellow blue";
console.log[paragraph.className]; // "yellow blue"
6 từ phần tử
Hello World! This is a paragraph element.
const paragraph = document.getElementById["header"];
paragraph.className = "yellow blue";
console.log[paragraph.className]; // "yellow blue"
7 ở trên và thêm một lớp mới tên là
Hello World! This is a paragraph element.
const paragraph = document.getElementById["header"];
paragraph.className = "yellow blue";
console.log[paragraph.className]; // "yellow blue"
8, bạn cần chỉ định cả hai lớp như sauconst paragraph = document.getElementById["header"];
paragraph.className = "red font-large";
Mặc dù lớp
Hello World! This is a paragraph element.
const paragraph = document.getElementById["header"];
paragraph.className = "yellow blue";
console.log[paragraph.className]; // "yellow blue"
6 đã có sẵn nhưng bạn vẫn cần chỉ định lại nó, tạo ra một sự dư thừa nhỏ trong mã của bạnĐể tránh loại dự phòng này, bạn có thể sử dụng thuộc tính classList
để thay thế
Thay đổi giá trị lớp bằng thuộc tính classList
Thuộc tính classList
là thuộc tính chỉ đọc của phần tử HTML trả về giá trị thuộc tính class
dưới dạng một mảng. Thuộc tính cũng cung cấp một số phương thức để bạn thao tác giá trị thuộc tính class
Ví dụ: để thêm tên lớp mới mà không xóa giá trị hiện tại, bạn có thể sử dụng phương thức
const paragraph = document.getElementById["header"];
paragraph.className = "red font-large";
4Sử dụng cùng một ví dụ về phần tử
Hello World! This is a paragraph element.
const paragraph = document.getElementById["header"];
paragraph.className = "yellow blue";
console.log[paragraph.className]; // "yellow blue"
7 ở trên, đây là cách thêm lớp
Hello World! This is a paragraph element.
const paragraph = document.getElementById["header"];
paragraph.className = "yellow blue";
console.log[paragraph.className]; // "yellow blue"
8 mà không xóa phần tử
Hello World! This is a paragraph element.
const paragraph = document.getElementById["header"];
paragraph.className = "yellow blue";
console.log[paragraph.className]; // "yellow blue"
6
Hello World! This is a paragraph element.
const paragraph = document.getElementById["header"];
paragraph.classList.add["font-large"];
console.log[paragraph.classList]; // ["red", "font-large"]
Khi bạn muốn xóa giá trị thuộc tính class
của phần tử, bạn có thể sử dụng phương thức
const paragraph = document.getElementById["header"];
paragraph.className = "red font-large";
9, cho phép bạn đặt tên lớp const paragraph = document.getElementById["header"];
paragraph.className = "red font-large";
9 dưới dạng chuỗi được phân cách bằng dấu phẩy