Thuộc tính id trong JavaScript

• Bùi Tấn Lực
• 965
• 17/09/2025

Chức năng của Thuộc tính id trong JavaScript

Thuộc tính id trong JavaScript dùng để lấy giá trị của thuộc tính id của một phần tử HTML hoặc dùng để đổi giá trị của thuộc tính id của phần tử HTML.

Cú pháp của Thuộc tính id trong JavaScript

Dùng để lấy giá trị của id:

let ketqua = tenbien.id

tenbien: Tên biến là một phần tử HTML, thường dùng getElementsByTagName để lấy tên phần tử HTML rồi lấy vị trí từng phần tử.

ketqua: Giá trị của id trả về biến kết quả.

Dùng để đổi giá trị:

tenbien.id = "giatrimoi";

tenbien: Tên biến là phần tử chứa id cần thay đổi giá trị, thường dùng getElementById và đưa giá trị hiện tại của id vào.

giatrimoi: Tên giá trị mới của id.

Code Thuộc tính id trong JavaScript

Thuộc tính id lấy giá trị trong JavaScript

<a id="hostingid" href="https://webmoi.vn/hosting/">Hosting</a>
<a id="blogid" href="https://webmoi.vn/blog/">Blog</a>
<a id="lienheid" href="https://webmoi.vn/lien-he/">Liên hệ</a>
<p>Giá trị của id của thẻ a ở vị trí đầu tiên: <span id="nhungid"></span></p>
<script>
let id = document.getElementsByTagName("a")[0].id;
document.getElementById("nhungid").innerHTML = id;
</script>

Chạy Thử

Thuộc tính id đổi giá trị trong JavaScript

<a id="hostingid" href="https://webmoi.vn/hosting/">Hosting</a>
<a id="blogid" href="https://webmoi.vn/blog/">Blog</a>
<a id="lienheid" href="https://webmoi.vn/lien-he/">Liên hệ</a>
<p>Giá trị của id của thẻ a ở vị trí đầu tiên: <span id="nhungid"></span></p>
<p>Giá trị của id của thẻ a ở vị trí đầu tiên sau khi đổi: <span id="nhungiddoi"></span></p>
<script>
// Lấy id của thẻ a ở vị trí đầu tiên
let id = document.getElementsByTagName("a")[0].id;
document.getElementById("nhungid").innerHTML = id;
// Đổi id của thẻ a ở vị trí 0
let element = document.getElementById("hostingid").id = "newid";
// Lấy id của thẻ a ở vị trí đầu tiên sau khi đổi
let iddoi = document.getElementsByTagName("a")[0].id;
document.getElementById("nhungiddoi").innerHTML = iddoi;
</script>

Kết quả:

Giá trị của id của thẻ a ở vị trí đầu tiên: hostingid

Giá trị của id của thẻ a ở vị trí đầu tiên sau khi đổi: newid

Chạy Thử

Những lưu ý khi sử dụng thuộc tính id trong JavaScript

Thuộc tính id giúp JavaScript xác định đúng phần tử cần thao tác, nhưng hiệu quả chỉ được đảm bảo khi giá trị id được tổ chức hợp lý. Một số nguyên tắc đơn giản về cách đặt tên, tính duy nhất và lựa chọn giữa id với class sẽ giúp mã dễ đọc, dễ bảo trì và hạn chế lỗi khi xử lý DOM.

Quy tắc đặt id cho phần tử HTML

Nên đặt id theo đúng mục đích của phần tử và ưu tiên tên ngắn, rõ nghĩa. Có thể dùng chữ cái, chữ số, dấu gạch ngang hoặc dấu gạch dưới, nhưng không nên đặt tên quá chung chung khiến người đọc khó biết phần tử đó dùng để làm gì.

Ví dụ, với ô nhập email, tên emailInput hoặc email-input dễ hiểu hơn một tên như box1. Khi JavaScript được mở rộng, cách đặt tên có ý nghĩa sẽ giúp nhanh chóng nhận ra phần tử đang được xử lý.

<input id="email-input" type="email">

Ngoài ra, nên duy trì một quy ước đặt tên thống nhất trong toàn bộ website. Không nên lúc dùng chữ hoa, lúc dùng chữ thường hoặc thay đổi nhiều kiểu đặt tên khác nhau cho những phần tử có vai trò tương tự.

Id trùng nhau ảnh hưởng đến JavaScript như thế nào?

Mỗi id nên xác định một phần tử duy nhất trong tài liệu HTML. Nếu nhiều phần tử dùng cùng một giá trị id, mã JavaScript có thể không thao tác đúng phần tử mà bạn mong muốn, đặc biệt khi sử dụng các phương thức tìm kiếm phần tử theo id.

Ví dụ dưới đây tạo ra hai phần tử cùng có id là notice:

<p id="notice">Thông báo thứ nhất</p>
<p id="notice">Thông báo thứ hai</p>

Cách tổ chức này khiến việc xác định chính xác phần tử trở nên khó khăn và có thể dẫn đến kết quả không như dự kiến. Nếu nhiều phần tử cần được xử lý cùng nhau, class thường phù hợp hơn vì một class có thể được gán cho nhiều phần tử.

Do đó, trước khi viết JavaScript, hãy kiểm tra cấu trúc HTML để đảm bảo mỗi id được sử dụng đúng mục đích và không bị lặp ngoài ý muốn.

Phân biệt id và class khi thao tác với phần tử HTML

id phù hợp khi cần nhận diện một phần tử cụ thể, chẳng hạn một biểu mẫu, một khu vực nội dung hoặc một nút có vai trò riêng biệt. Ngược lại, class thích hợp cho nhóm nhiều phần tử có cùng đặc điểm hoặc cùng cách xử lý.

Ví dụ, một nút mở menu có thể sử dụng id riêng, trong khi nhiều nút sản phẩm có thể dùng chung một class:

<button id="menu-toggle">Mở menu</button>

<button class="product-button">Sản phẩm 1</button>
<button class="product-button">Sản phẩm 2</button>

Chọn đúng giữa id và class giúp cấu trúc HTML rõ ràng hơn và làm cho mã JavaScript dễ mở rộng. Nếu mục tiêu là tìm một phần tử duy nhất, id thường là lựa chọn phù hợp; nếu cần áp dụng cùng một logic cho nhiều phần tử, nên cân nhắc class.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính id trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thuộc tính id trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp