Trong bài hướng dẫn tự học lập trình JavaScript này, bạn sẽ tìm hiểu cách get, set và xóa các thuộc tính khỏi các thành phần HTML trong JavaScript với JS DOM.get, set và xóa các thuộc tính khỏi các thành phần HTML trong JavaScript với JS DOM.
Google // Chọn đến phần tử cần lấy thuộc tính thông qua JS DOM var link = document.getElementById["myLink"]; // Lấy giá trị của thuộc tính var href = link.getAttribute["href"]; // Thông báo giá trị lấy được alert[href]; // Kết quả: //hanoiict.edu.vn/ var target = link.getAttribute["target"]; alert[target]; // Kết quả: _blank
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é.DOM Selector trong JavaScript nhé.
Set [Thiết lập] thuộc tính thông qua JS DOM
Phương thức setAttritute[] được sử dụng để set [thiết lập] thuộc tính trên phần tử đã chỉ định bằng JS DOM.setAttritute[] được sử dụng để set [thiết lập] thuộc tính trên phần tử đã 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 [name] và giá trị [value] được chỉ định.tên [name] và giá trị [value] được chỉ định.
Đoạn code JavaScript trong ví dụ sau sẽ thêm một class và một thuộc tính disabled vào phần tử .class và một thuộc tính disabled vào phần tử .
Click Me
// Chọn đến phần tử cần set thuộc tính
var btn = document.getElementById["myBtn"];
// Thiết lập thuộc tính mới
btn.setAttribute["class", "click-btn"];
btn.setAttribute["disabled", ""];
Như bạn đã thấy ở ví dụ trên, mình đã thêm vào nút một thuộc tính mới có name và value như:
+ Một thuộc tính có name là "class" và giá trị 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ó value.
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 code 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ẻ .href hiện có của thẻ Tự học JavaScript // Chọn đến phần tử cần thiết lập thuộc tính var link = document.getElementById["myLink"]; // Thay đổi thuộc tính href của phần tử link.setAttribute["href", "//hanoiict.edu.vn/"];
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.removeAttribute[] được sử dụng để xóa một thuộc tính khỏi thành phần được chỉ định.
Đoạn code JavaScript trong ví dụ sau sẽ xóa thuộc tính href khỏi phần tử anchor.
NIIT - ICT Hà Nội
// Chọn đến phần tử cần xóa thuộc tính
var link = document.getElementById["myLink"];
// Xóa thuộc tính href khỏi phần tử
link.removeAttribute["href"];
Bạn thử chạy ví dụ trên và kiểm tra phần tử xem, 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 get, set 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 cho 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 nghề lập trình này.
Note: Nếu bạn muốn trở thành Lập trình viên phát triển website 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.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.