Phương thức getAttribute() trong JavaScript
Bùi Tấn Lực - 941
- 11/09/2025
Chức năng của Phương thức getAttribute() trong JavaScript
Phương thức getAttribute() trong JavaScript dùng để lấy giá trị của một thuộc tính trong một thẻ HTML, bạn có thể lấy trên thuộc tính mặc định hoặc thuộc tính bạn tự tạo.
Cú pháp của Phương thức getAttribute() trong JavaScript
let ketqua = tenbien.getAttribute('thuoctinh');
tenbien: Tên biến là phần tử HTML cần lấy giá trị của các thuộc tính, thường dùng document.getElementById("giá trị id") để lấy.
ketqua: Kết quả trả về là các giá trị của các thuộc tính.
Code Phương thức getAttribute() trong JavaScript
document.getElementById('hinhid').getAttribute('src');
<img id="hinhid" src="https://webmoi.vn/media/images/logo-web-moi.png" alt="Web Mới" title="Công ty Web Mới" data-id="35" >
<script>
const hinhid = document.getElementById('hinhid');
// Lấy các thuộc tính mặc định
document.write("src: "+hinhid.getAttribute('src')+"<br>"); // Kết quả: https://webmoi.vn/media/images/logo-web-moi.png
document.write("alt: "+hinhid.getAttribute('alt')+"<br>"); // Kết quả: Web Mới
document.write("title: "+hinhid.getAttribute('title')+"<br>"); // Kết quả: Công ty Web Mới
// Lấy các thuộc tính tự tạo
document.write("data-id: "+hinhid.getAttribute('data-id')+"<br>"); // Kết quả: 35
</script>
Kết quả:
src: https://webmoi.vn/media/images/logo-web-moi.png
alt: Web Mới
title: Công ty Web Mới
data-id: 35
Ứng dụng getAttribute() trong JavaScript thực tế
Sau khi nắm được cách hoạt động của getAttribute(), bạn có thể sử dụng phương thức này để đọc dữ liệu trực tiếp từ thuộc tính của phần tử HTML. Cách làm đặc biệt hữu ích khi JavaScript cần lấy thông tin được khai báo sẵn trong giao diện, chẳng hạn dữ liệu data-*, đường dẫn liên kết hoặc địa chỉ hình ảnh.
Điểm quan trọng là getAttribute() chỉ thực hiện nhiệm vụ đọc giá trị. Nếu muốn thay đổi hoặc xóa thuộc tính, bạn cần sử dụng phương thức phù hợp khác.
Lấy thuộc tính data-* bằng getAttribute()
Các thuộc tính data-* thường được dùng để gắn dữ liệu tùy chỉnh vào phần tử HTML. JavaScript có thể lấy trực tiếp giá trị này bằng getAttribute(), rất phù hợp khi cần truyền một mã hoặc thông tin ngắn từ giao diện vào chương trình.
<button id="product" data-id="SP102" data-category="laptop">Xem sản phẩm</button>
Trong ví dụ trên, data-id và data-category được đọc dưới dạng chuỗi. Nếu thuộc tính không tồn tại, getAttribute() sẽ trả về null, vì vậy nên kiểm tra giá trị trước khi tiếp tục xử lý trong những trường hợp dữ liệu có thể không đầy đủ.
Lấy thuộc tính href và src của phần tử HTML
getAttribute() cũng thường được dùng để lấy đường dẫn được khai báo trong các thuộc tính href và src. Điều này hữu ích khi cần kiểm tra hoặc xử lý nhiều liên kết, hình ảnh mà không phải gán cứng đường dẫn trong JavaScript.
<a id="website" href="https://example.com">Truy cập website</a>
Cách này giúp chương trình đọc đúng giá trị thuộc tính đang được khai báo trên HTML. Khi làm việc với các liên kết hoặc hình ảnh do người dùng nhập vào, bạn cũng nên kiểm tra dữ liệu trước khi sử dụng để tránh xử lý những giá trị không hợp lệ.
Kết hợp getAttribute() với sự kiện trong JavaScript
Một cách ứng dụng thực tế khác là kết hợp getAttribute() với các sự kiện. Mỗi phần tử có thể chứa một giá trị riêng trong thuộc tính data-*, sau đó JavaScript đọc giá trị đó khi người dùng tương tác.
<button class="product" data-id="SP101">Sản phẩm 1</button>
<button class="product" data-id="SP102">Sản phẩm 2</button>
Khi người dùng nhấn vào từng nút, JavaScript sẽ lấy data-id của chính phần tử đó thay vì phải tạo một đoạn xử lý riêng cho từng sản phẩm. Cách tổ chức này giúp mã nguồn gọn hơn và dễ mở rộng khi số lượng phần tử tăng lên.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phương thức getAttribute() trong JavaScript.
- 0 Bình luận
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 *
