Trong Html DOM, cả id và class đều là bộ chọn phần tử và được sử dụng để xác định một phần tử dựa trên tên được gán cho các tham số này.
Sau đây là những điểm khác biệt quan trọng giữa Id và Class.
| Sr. Không. | Phím | Id | Lớp |
|---|---|---|---|
| 1 | Cú pháp | Trong Html, tên ID phần tử bắt đầu bằng ký hiệu “#” theo sau là tên duy nhất được gán cho nó. | Mặt khác, lớp được gán cho một phần tử có tên bắt đầu bằng “.” theo sau là tên lớp. |
| 2 | Bộ chọn | Chỉ có thể gắn một bộ chọn ID vào một phần tử. | Có thể gắn nhiều bộ chọn lớp vào một phần tử. |
| 3 | Tính duy nhất | Id là duy nhất trong một trang và chỉ có thể áp dụng cho nhiều nhất một phần tử | Lớp có thể được áp dụng cho nhiều phần tử nên nó có thể nhiều lần trên một trang. |
Ví dụ về Id so với Class
Id.html
<!DOCTYPE html>
<html>
<head>
<title>
Id demo
</title>
<style>
#idDemo{
color:green;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by Id</h1>
<p id="idDemo">Demo for Id selector</p>
</body>
</html> Class.html
<!DOCTYPE html>
<html>
<head>
<title>
Class demo
</title>
<style>
.classDemo{
color:orange;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by class</h1>
<p class="classDemo">Demo for class selector</p>
</body>
</html>