• Trang chủ
• Học JavaScript
• JS DOM lấy, đặt xóa các thuộc tính

JS DOM lấy, đặt xóa các thuộc tính

Trong hướng dẫn này, bạn sẽ tìm hiểu cách lấy, đặt và xóa thuộc tính khỏi các phần tử HTML trong JavaScript.

Làm việc với các thuộc tính

Thuộc tính là những từ đặc biệt được sử dụng bên trong thẻ bắt đầu 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ố hàm để 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 chi tiết về các hàm này.

Lấy giá trị thuộc tính của phần tử

Hàm 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://www.google.com/" target="_blank" id="myLink">Google</a>

<script>
    // Selecting the element by ID attribute
    let link = document.getElementById("myLink");
    
    // Getting the attributes values
    let href = link.getAttribute("href");
    alert(href); // Outputs: https://www.google.com/
    
    let target = link.getAttribute("target");
    alert(target); // Outputs: _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. Vui lòng xem chương bộ chọn DOM JavaScript để tìm hiểu thêm về chúng.

Đặt thuộc tính trên các phần tử

Hàm setAttribute() được sử dụng để đặt thuộc tính trên phần tử được chỉ định.

Nếu thuộc tính đã tồn tại trên phần tử thì giá trị sẽ được cập nhật; mặt khác, một thuộc tính mới sẽ được thêm vào với tên và giá trị được chỉ định. Mã JavaScript trong ví dụ sau sẽ thêm thuộc tính class và  disabled vào phần tử <button>.

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

<script>
    // Selecting the element
    let btn = document.getElementById("myBtn");
	
    // Setting new attributes
    btn.setAttribute("class", "click-btn");
    btn.setAttribute("disabled", "");
</script>

Tương tự, bạn có thể sử dụng hàm setAttribute() để cập nhật hoặc thay đổi giá trị của thuộc tính hiện có trên phần tử HTML. Mã JavaScript trong ví dụ sau sẽ cập nhật giá trị thuộc tínhhref hiện có của phần tử neo ( <a>).

<a href="#" id="myLink">VZN.VN</a>

<script>
    // Selecting the element
    let link = document.getElementById("myLink");
	
    // Changing the href attribute value
    link.setAttribute("href", "https://vzn.vn");
</script>

Xóa thuộc tính khỏi phần tử

Hàm removeAttribute()được sử dụng để xóa một thuộc tính khỏi phần tử được chỉ định.

Mã JavaScript trong ví dụ sau sẽ xóa thuộc tính href khỏi phần tử neo.

<a href="https://www.google.com/" id="myLink">Google</a>

<script>
    // Selecting the element
    let link = document.getElementById("myLink");
	
    // Removing the href attribute
    link.removeAttribute("href");
</script>