Get / Set thuộc tính thông qua JS DOM

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.

Cách get / set thuộc tính phần tử thông qua JS DOM

1. Thuộc tính trong HTML là gì?

Các thuộc tính là các keyword đặc biệt được sử dụng bên trong thẻ mở của phần tử HTML để kiểm soát hành vi của thẻ hoặc cung cấp thông tin bổ sung về thẻ.

JavaScript cung cấp một số phương thức để thêm, xóa hoặc thay đổi thuộc tính của phần tử HTML. Trong các phần sau chúng ta sẽ tìm hiểu về các phương pháp này một cách chi tiết.

2. Get (Lấy) giá trị thuộc tính thông qua JS DOM

Phương thức getAttribute() được sử dụng để lấy giá trị hiện tại của một thuộc tính trên phần tử.

Nếu thuộc tính được chỉ định không tồn tại trên phần tử, nó sẽ trả về null. Đây là một ví dụ:

<a href="https://hanoiict.edu.vn/" target="_blank" id="myLink">Google</a>

<script>
    // 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ả: https://hanoiict.edu.vn/
    
    var target = link.getAttribute("target");
    alert(target); // Kết quả: _blank
</script>

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é.

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.

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.

Đ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ử <button>.

<button type="button" id="myBtn">Click Me</button>

<script>
    // 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", "");
</script>

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ẻ <a>.

<a href="#" id="myLink">Tự học JavaScript</a>

<script>
    // 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", "https://hanoiict.edu.vn/");
</script>

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 code JavaScript trong ví dụ sau sẽ xóa thuộc tính href khỏi phần tử anchor.

<a href="https://hanoiict.edu.vn/" id="myLink">NIIT - ICT Hà Nội</a>

<script>
    // 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");
</script>

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.