Phương thức getAttribute[]
của giao diện Element
trả về giá trị của một thuộc tính được chỉ định trên phần tử
Nếu thuộc tính đã cho không tồn tại, giá trị được trả về sẽ là
Hi Champ!
0 hoặc
Hi Champ!
1 [chuỗi rỗng]; cú pháp
getAttribute[attributeName]
Thông số
2 là tên của thuộc tính mà bạn muốn lấy giá trịHi Champ!
Giá trị trả về
Một chuỗi chứa giá trị của
Hi Champ!
2ví dụ
Hi Champ!
// in a console
const div1 = document.getElementById['div1'];
//=> Hi Champ!
const exampleAttr = div1.getAttribute['id'];
//=> "div1"
const align = div1.getAttribute['align']
//=> null
Sự miêu tả
Vỏ dưới
Khi được gọi trên một phần tử HTML trong DOM được gắn cờ là tài liệu HTML, getAttribute[]
viết thường đối số của nó trước khi tiếp tục
Thuộc tính không tồn tại
Tất cả các trình duyệt web hiện đại trả về
Hi Champ!
0 khi thuộc tính được chỉ định không tồn tại trên phần tử được chỉ địnhTruy xuất các giá trị nonce
Vì lý do bảo mật, CSP nonce từ các nguồn không phải tập lệnh, chẳng hạn như bộ chọn CSS và lệnh gọi
Hi Champ!
3 bị ẩn Trong bài viết hướng dẫn tự học lập trình JavaScript này, bạn sẽ tìm hiểu cách lấy, đặt và xóa các thuộc tính khỏi các thành phần HTML trong JavaScript với JS DOM
JavaScript cung cấp một số cách khác nhau để chọn các thành phần trên một trang
Nếu bạn không nhớ thì vui lòng xem lại bài học DOM Selector trong JavaScript nhé
Đặt [Thiết lập] thuộc tính thông qua JS DOM
Phương thức setAttritute[] được sử dụng để thiết lập [thiết lập] thuộc tính trên phần tử đã được chỉ định bằng JS DOM
Nếu thuộc tính đã tồn tại trên phần tử, giá trị được cập nhật
Nếu không, một thuộc tính mới được thêm vào với tên [tên] và giá trị [giá trị] được chỉ định
Đoạn mã JavaScript trong ví dụ sau sẽ thêm một lớp và một thuộc tính bị vô hiệu hóa vào phần tử.
Hi Champ!
6Như bạn đã thấy ở ví dụ trên, mình đã thêm vào nút thuộc tính mới có tên và giá trị như
+ Một thuộc tính có name là "class" và value là "click-btn"
+ Sau đó, mình lại thiết lập thêm một thuộc tính có name là "disabled" và không có giá trị
Tương tự, bạn có thể sử dụng phương thức setAttribute[] để cập nhật hoặc thay đổi giá trị của một thuộc tính hiện có trên một phần tử HTML
Đoạn mã JavaScript trong ví dụ sau sẽ cập nhật giá trị của thuộc tính href hiện có của thẻ
Tự học JavaScript
Xóa thuộc tính khỏi các phần tử thông qua JS DOM
Phương thức removeAttribute[] được sử dụng để xóa một thuộc tính khỏi thành phần được chỉ định
Đoạn mã JavaScript trong ví dụ sau sẽ xóa thuộc tính href khỏi phần tử neo
NIIT - ICT Hà Nội
Bạn thử chạy ví dụ trên và kiểm tra xem phần tử, có còn thấy thuộc tính href không?
Như vậy, qua bài viết này, mình đã giúp bạn biết cách lấy, đặt thuộc tính và xóa thuộc tính khỏi phần tử HTML thông qua JS DOM
Hi vọng bài viết giúp quá trình học lập trình web của bạn trở nên tốt hơn. Chúc bạn thành công với việc khởi xướng dự án này
Ghi chú. Nếu bạn muốn trở thành Trang web lập trình viên phát triển thực thụ, hãy tham khảo ngay KHÓA HỌC LẬP TRÌNH VIÊN FULL STACK tại NIIT - ICT Hà Nội. Đầu tư 12 tháng, dùng cả đời